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

【问题标题】：Don't close Dialog(Modal) when click outside in React & HeadlessUI在 React 和 HeadlessUI 中单击外部时不要关闭对话框（模态）
【发布时间】：2021-11-30 05:59:20
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs modal-dialog tailwind-css tailwind-ui headless-ui

【解决方案1】：

您可以从Dialog 中删除onClose={closeModal}，而是通过您提供的链接将closeModal 函数传递给示例中任何按钮的onClick 处理程序：

<Dialog
  as="div"
  className="fixed inset-0 z-10 overflow-y-auto" // removed onClose
>

而是将其传递给对话框内的关闭按钮

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

【讨论】：

我无法移除 OnClose 道具，它会显示错误。
可以给 onClose={()=>{}} 空函数
我尝试了一个 empy 函数，它比我的解决方案更好......谢谢

【解决方案2】：

https://headlessui.dev/react/dialog ReactJS 和 Typescript 我也遇到了同样的问题

我修复了传递一个名为 onClose(value: boolean): void; 的新属性。我可以在哪里处理组件外部的状态 onClose={() => {setIsOpen(false) }} 并在对话框中调用道具 onClose={onClose}

第 1 部分

   <Transition appear show={showModal} as={Fragment}>
        <Dialog
          as="div"
          className={clsx("fixed inset-0 z-50 overflow-y-auto", 
          className)}
          onClose={onClose}
        >

....

第二部分enter code here

   <Modal
        {...args}
        showModal={isOpen}
        onClose={() => {setIsOpen(false) }}
      />

【讨论】：

【解决方案3】：

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

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

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

【讨论】：