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

Question

更新到 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>

它说，“使用 ID.showModal() 方法打开模式”我只是不明白这意味着什么。在DaisyUI的上一个版本中，这个麻烦不存在。我在一个旧项目中使用它，我还在我的项目中更新了 daisyUI npm 包。

Answer 1

在 daisui v3 中，使用模式的首选方式是使用新的 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>
  );
}