在 React 和 HeadlessUI 中单击外部时不要关闭对话框（模态）

Question

我的问题很简单...我在我的应用程序中使用 HeadlessUI 的 Dialog 组件进行 React，当我单击模式时我希望它不会关闭。在文档中，有对话框。处理此交互的覆盖参数，但没有设置可以禁用它。

有什么解决办法吗？这是我正在使用的组件的 HeadlessUI 文档的链接：https://headlessui.dev/react/dialog

也许你知道 React 的“警报阻塞模式”是什么？

Answer 1

您可以使onClose事件不执行任何操作，而仅在单击对话框中的按钮时关闭对话框：

// eslint-disable-next-line @typescript-eslint/no-empty-function
<Dialog open={isOpen} onClose={() => {}}>

相反，在对话框内创建一个关闭按钮：

<button onClick={handleClose}>Close</button>

和handleClose：

const handleClose = () => {
  setIsOpen(false);
};

Answer 2

在Dialog UI的onClose函数中添加返回空对象。这是我的代码：

 <Dialog
    initialFocus={completeButtonRef}
    as='div'
    className='fixed inset-0 z-10 overflow-y-auto'
    onClose={() => {}}
    open={false}
  >

Answer 3

添加pointer-events: none到 Dialog.Overlay。

pointer-events-none这可以通过添加类来完成

https://github.com/tailwindlabs/headlessui/issues/621#issuecomment-867161749