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を追加した。

https://github.com/daisyui/react-daisyui/pull/456
コメントするにはログインが必要です
y
yosi