我的应用有一个名为 Open Modal
的按钮。单击此按钮时,会使用 document.body
将模态附加到 createPortal
。 Link to demo
一旦安装了模态(即 isOpen === true
),我想在用户每次点击页面上的某处时将一些文本打印到控制台。
为此,我使用 useEffect
钩子将点击事件绑定到 document
对象 if isOpen === true
:
useEffect(() => {
const eventHandler = () => console.log("You clicked me");
if (isOpen) {
document.addEventListener("click", eventHandler);
}
}, [isOpen]);
当用户第一次点击“Open Modal”时,isOpen
从 false
变为 true
,这会导致组件重新渲染。重新渲染完成后,注册上述效果中的点击事件。
问题
第一次点击“打开模式”会触发 document
的点击事件(您可以在控制台中看到事件处理程序的输出)。这对我来说没有意义 - 在第一个“打开模态”点击传播到它之前,document
上的点击事件怎么可能已经注册?
预期行为
第一次点击“打开模态”应该只会导致 document
的点击事件被注册,此时事件本身不应触发。
如果我省略 createPortal
(参见演示的第 38 行),应用程序会按预期工作,即在第一次点击“打开模式”时注册事件,并且在所有后续点击页面。
如果我将模态挂载到应用根目录的同级而不是 document.body
(请参阅演示的第 39 行),该应用程序也能按预期工作。所以上面描述的问题只在 createPortal
与 document.body
作为容器一起使用时出现,但我不明白为什么。
答案 0 :(得分:1)
我不确定,但我认为,由于 Event Propagation
而发生的问题,当传播完成时,文档 click
事件已注册,这可能是它调用 { {1}}。如果我错了,请纠正我。
如果您停止事件传播,它就可以正常工作。
eventHandler
演示链接here