Noh | エンジニア向け情報共有コミュニティ
Signup / Login

Daisy ui のModalでモーダルが範囲外をクリックして閉じる際にコールバック関数を実行

y
yosi2024/07/24 20:09

Daisy ui reactのModalを使ったコードです。Outsideをクリックすることでモーダルが閉じます。
モーダルが閉じる際にコールバック関数を実行できますか?

const ref = useRef<HTMLDialogElement>(null); const handleShow = useCallback(() => { ref.current?.showModal(); }, [ref]); return <div className="font-sans"> <Button onClick={handleShow}>Open Modal</Button> <Modal {...args} ref={ref}> <Modal.Header className="font-bold">Hello!</Modal.Header> <Modal.Body>Press ESC key or click outside to close</Modal.Body> </Modal> </div>
A
Answerer AIPowered by gpt-3.5-turbo

はい、Daisy ui reactのModalでは、モーダルが閉じる際にコールバック関数を実行することができます。具体的には、onClose propを使用してコールバック関数を指定することができます。例えば、以下のようにコードを修正することで、モーダルが閉じる際にonClose関数が実行されます。

import { useState, useRef } from 'react'; import { Button, Modal } from 'daisyui-react'; const MyModal = () => { const [isOpen, setIsOpen] = useState(false); const handleClose = () => { // モーダルが閉じる際の処理を記述する console.log('モーダルが閉じられました'); }; return ( <div className="font-sans"> <Button onClick={() => setIsOpen(true)}>Open Modal</Button> {isOpen && ( <Modal onClose={handleClose}> <Modal.Header className="font-bold">Hello!</Modal.Header> <Modal.Body>Press ESC key or click outside to close</Modal.Body> </Modal> )} </div> ); }; export default MyModal;

上記の修正により、モーダルが閉じる際にコールバック関数handleCloseが実行されます。

y
yosi2024/07/24 20:30

逆にJSコードからモーダルを閉じることはできますか

A
Answerer AIPowered by gpt-3.5-turbo

はい、Daisy ui reactのModalではJavaScriptコードからモーダルを閉じることができます。具体的には、モーダル要素に対して close メソッドを呼び出すことで、モーダルを閉じることができます。

以下はその例です:

import { useRef } from 'react'; import { Button, Modal } from 'daisyui-react'; const MyModal = () => { const modalRef = useRef(null); const handleCloseModal = () => { modalRef.current.close(); }; return ( <div className="font-sans"> <Button onClick={handleCloseModal}>Close Modal</Button> <Modal ref={modalRef}> <Modal.Header className="font-bold">Hello!</Modal.Header> <Modal.Body>Press ESC key or click outside to close</Modal.Body> </Modal> </div> ); }; export default MyModal;

上記の例では、ボタンをクリックすると handleCloseModal 関数が実行され、その中で close メソッドを呼び出してモーダルを閉じています。モーダル要素は ref を使って参照され、current プロパティを介してモーダルを操作することができます。

y
yosi2024/08/29 1:26

HTMLのDialogタグについて教えてください。<dialog>でopen=trueとしたとき、モーダルを閉じることができなくなります。子の挙動について説明してください。

A
Answerer AIPowered by gpt-3.5-turbo

HTMLの<dialog>要素はモーダルダイアログを表します。open属性をtrueに設定すると、モーダルが開かれます。その際、モーダルダイアログが表示されると、背後のコンテンツがグレーアウトして操作不可になります。

<dialog>要素の子要素は通常、モーダルダイアログ内部のコンテンツを定義するために使用されます。子要素はレイアウトやUIの構築に使用される一般的なHTML要素であることができます。例えば、<p>要素、<button>要素、テキスト、画像等が子要素になり得ます。

モーダルダイアログ内のコンテンツが開いた状態であり、ユーザーがその背後のコンテンツをクリックしても自動的にモーダルが閉じることはありません。モーダルダイアログを閉じるためには、以下の方法があります。

  1. ユーザーがモーダル内の特定のUI要素(たとえば、閉じるボタン)をクリックすることで、手動でモーダルを閉じる
  2. open属性をfalseに変更することで、JavaScriptを使用してモーダルをプログラム的に閉じる
  3. JavaScriptを使用して<dialog>要素のcloseメソッドを呼び出すことで、モーダルをプログラム的に閉じる

具体的なコード例は以下の通りです。

<dialog open={true}> <button onclick="this.parentNode.close()">Close</button> <p>モーダルダイアログの内容</p> </dialog>

この例では、閉じるボタン(<button>要素)をクリックすると、モーダルダイアログがプログラム的に閉じられます。もちろん、JavaScriptを使用して他のユーザー操作に基づいてモーダルを閉じる方法もあります。

y
yosi2024/08/29 2:01

そもそもReact-DaisyにonCloseがどうしてないんだろうと思ってコードを見たら、型に問題がありそうなだけだったので修正PR送ってみました。

https://github.com/daisyui/react-daisyui/pull/459
y
yosi2024/08/29 2:02

ちなみに先日ariaHiddenを追加した。

コメントするにはログインが必要です