如何在ReactJS中更新到v3后控制DaisyUI Modal？

gupuwyp2 于 5个月前发布在 React

关注(0)|答案(2)|浏览(85)

DaisyUI更新到第3版后，我不再控制响应模式的打开和关闭。我正在使用ReactJS。有人能帮助我吗？

// modal button
<button className="btn" onClick={()=>window.my_modal_5.showModal()}>open modal</button>

// modal
<dialog id="my_modal_5" className="modal modal-bottom sm:modal-middle">
  <form method="dialog" className="modal-box">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click the button below to close</p>
    <div className="modal-action">
      {/* if there is a button in form, it will close the modal */}
      <button className="btn">Close</button>
    </div>
  </form>
</dialog>

字符串
它说，“Open the modal using ID.showModal（）method”我只是不明白这是什么意思。在DaisyUI的最后一个版本中，这个问题并不存在。我正在为一个旧项目使用这个，我还更新了我的项目中的daisyUI npm包。

reactjs

来源：https://stackoverflow.com/questions/76955824/how-to-control-daisyui-modal-after-update-to-v3-in-reactjs

2条答案

按热度按时间

monwx1rj1#

在daisyui v3中，使用modal的首选方式是使用新的Html-dialog-element，所有浏览器都支持它。
使用Html-dialog-element的好处是多方面的。看看这个有用的博客文章：https://blog.webdevsimplified.com/2023-04/html-dialog/
在react中使用它，看看这个例子：

function Modal({title, text, visible, onClose}) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (!modalRef.current) {
      return;
    }
    visible ? modalRef.current.showModal() : modalRef.current.close();
  }, [visible]);

  const handleClose = () => {
    if (onClose) {
      onClose();
    }
  }

  const handleESC = (event) => {
    event.preventDefault();
    handleClose();
  }

  return (
    <dialog ref={modalRef} id="my_modal_1" className="modal" onCancel={handleESC}>
      <form method="dialog" className="modal-box">
        <h3 className="font-bold text-lg">Hello!</h3>
        <p className="py-4">Press ESC key or click the button below to close</p>
        <div className="modal-action">
          {/* if there is a button in form, it will close the modal */}
          <button className="btn" onClick={handleClose}>Close</button>
        </div>
      </form>
    </dialog>
  );
}

字符串

赞(0）回复(0）举报 5个月前

von4xj4u2#

您可以使用JS切换modal-open类（这里提到的）以有条件地打开和关闭它。
举例来说：

<dialog id="my_modal_1" className={clsx("modal", isOpen && "modal-open")}>

字符串

赞(0）回复(0）举报 5个月前

我来回答

如何在ReactJS中更新到v3后控制DaisyUI Modal？

2条答案

相关问题

热门标签

最新问答