2

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

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

也许你知道 React 的那种“警报阻止模式”？

4

4 回答 4

5

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

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

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

<button onClick={handleClose}>Close</button>
于 2021-10-11T13:39:51.830 回答
0

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

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

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

于 2021-12-19T13:09:50.580 回答
0

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

 <Dialog
    initialFocus={completeButtonRef}
    as='div'
    className='fixed inset-0 z-10 overflow-y-auto'
    onClose={() => {}}
    open={false}
  >
于 2022-02-20T16:44:09.640 回答
0

我对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}
        >

……

第2部分enter code here

   <Modal
        {...args}
        showModal={isOpen}
        onClose={() => {setIsOpen(false) }}
      />
于 2021-10-26T11:54:55.537 回答