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

Question

我的应用有一个名为 Open Modal 的按钮。单击此按钮时，使用createPortal 将模式附加到document.body。 Link to demo

一旦安装了模式（即isOpen === true），我想在用户每次单击页面上的某个位置时将一些文本打印到控制台。

为此，我使用useEffect 挂钩将点击事件绑定到document 对象，如果isOpen === true：

useEffect(() => {
    const eventHandler = () => console.log("You clicked me");

    if (isOpen) {
      document.addEventListener("click", eventHandler);
    }

  }, [isOpen]);

当用户第一次点击“打开模态”时，isOpen 会从false 变为true，这会导致组件重新渲染。重新渲染完成后，注册上述效果中的点击事件。

问题

第一次单击“打开模式”会导致document 的单击事件触发（您可以在控制台中看到事件处理程序的输出）。这对我来说没有意义 - document 上的点击事件怎么可能在第一次“打开模式”点击传播到它时已经注册？ p>

预期行为

第一次点击“打开模式”应该只会导致document的点击事件被注册，此时事件本身不应触发。

如果我省略 createPortal（参见演示的第 38 行），应用程序将按预期工作，即在第一次单击“打开模式”时注册事件，并在所有后续事件中调用事件处理程序 点击页面。

如果我将模式挂载到应用根目录的同级而不是 document.body，该应用也可以正常工作（参见演示的第 39 行）。所以上述问题只有在createPortal与document.body作为容器的情况下才会出现，但我不明白为什么。

Answer 1

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

如果你停止事件传播，它工作正常。

const openModal = useCallback(
    function (e) {
      if (!isOpen) { // stopping the propagation
        e.stopPropagation();
      }
      setOpen(true);
    },
    [setOpen, isOpen]
  );

演示链接here