我的问题很简单...我在应用中使用HeadlessUI的对话框组件React,当我在模式外单击时,我希望它不会关闭。在文档中,有处理此交互的Dialog.Overlay参数,但没有禁用它的设置。
有什么解决方案吗?这是我正在使用的组件的HeadlessUI文档的链接:https://headlessui.dev/react/dialog
也许你知道React的“警报阻塞模式”吗?
我的问题很简单...我在应用中使用HeadlessUI的对话框组件React,当我在模式外单击时,我希望它不会关闭。在文档中,有处理此交互的Dialog.Overlay参数,但没有禁用它的设置。
有什么解决方案吗?这是我正在使用的组件的HeadlessUI文档的链接:https://headlessui.dev/react/dialog
也许你知道React的“警报阻塞模式”吗?
9条答案
按热度按时间eaf3rand1#
您可以从
Dialog
中删除onClose={closeModal}
,而是通过您提供的链接将closeModal
函数传递给示例中任何按钮的onClick处理程序:而是将其传递给对话框内的关闭按钮
2skhul332#
在对话框UI的onClose函数中添加返回空对象。下面是我的代码:
vwhgwdsa3#
将
pointer-events: none
添加到对话框覆盖中。这可以通过添加
pointer-events-none
类来完成https://github.com/tailwindlabs/headlessui/issues/621#issuecomment-867161749
zqdjd7g94#
我在使用https://headlessui.dev/react/dialog ReactJS和Typescript时遇到了同样的问题
我修复了传递一个名为onClose的新属性(值:布尔值):空;其中,我可以处理组件onClose={()=〉{setIsOpen(false)}}之外的状态,也可以处理调用prop onClose={onClose}的对话框中的状态
第一部分
....
第2部分
enter code here
svmlkihl5#
你也可以返回null,它阻止外部点击!
5kgi1eie6#
我只需要将onClose设置为null。添加static属性会使自定义关闭事件无法工作。
pgvzfuti7#
在heandlessui更新1.16中,Overlay组件只出现在Dialog.Panel中,因此可以直接在Dialog中执行,以解释从Dialog.Panel中单击调用的onClose
结果如何:
46qrfjad8#
将handleClose函数更改为:
xyhw6mcr9#
您必须通过
static
。在此page中查找
static
然后,您将需要处理打开和关闭。