React - 带有 `document.body` 的 `createPortal` 会导致点击事件立即触发

如何解决React - 带有 `document.body` 的 `createPortal` 会导致点击事件立即触发

我的应用有一个名为 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 作为容器一起使用时出现，但我不明白为什么。

解决方法

我不确定，但我认为，由于 Event Propagation 而发生的问题，当传播完成时，文档 click 事件已注册，这可能是它调用 { {1}}。如果我错了，请纠正我。

如果您停止事件传播，它就可以正常工作。

eventHandler

演示链接here