无头 UI 模式（对话框组件）单击子项时如何关闭？

Question

如何通过单击任何子链接来关闭模式窗口？

import { Dialog } from "@headlessui/react"

const [modalIsOpen, setModalIsOpen] = useState<boolean>(false)

<Dialog open={modalIsOpen} onClose={() => setModalIsOpen(false)}>
        <div className="fixed inset-0 overflow-y-auto">
          <Dialog.Panel as="div" className="absolute right-5 top-10">
            <MobileLkMenu />
          </Dialog.Panel>
        </div>
      </Dialog>

现在模态窗口只需在外部单击即可关闭。

此外，如果将事件处理程序挂在 Dialog.Panel 上，则当单击其主体而不是链接时，模式窗口将关闭。如何关闭链接？

Answer 1

有几种方法可以解决这个问题。举个简单的例子，您可以使用 Dialog 中

onClose

提供的

@headlessui/react

回调。但是，

onClose

回调应该从模态内容本身触发，而不是从

Dialog.Panel

触发。

以下是如何修改代码来实现此目的：

import { Dialog } from "@headlessui/react";
import { useState } from "react";

const ModalComponent = () => {
  const [modalIsOpen, setModalIsOpen] = useState<boolean>(false);

  return (
    <Dialog open={modalIsOpen} onClose={() => setModalIsOpen(false)}>
      <div className="fixed inset-0 overflow-y-auto">
        <Dialog.Panel as="div" className="absolute right-5 top-10">
          <div>
            <p>Modal Content</p>
            <a href="#" onClick={() => setModalIsOpen(false)}>Close Modal</a>
          </div>
        </Dialog.Panel>
      </div>
    </Dialog>
  );
};

export default ModalComponent;

在此示例中，单击模态内容内的“关闭模态”链接将触发

onClick

事件，该事件又调用

setModalIsOpen(false)

，关闭模态窗口。