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

Question

我的应用程序有一个名为

Open Modal

的按钮。单击此按钮时，将使用

document.body

将模态附加到

createPortal

。 演示链接

一旦安装了模式（即

isOpen === true

），我想在每次用户单击页面上的某个位置时将一些文本打印到控制台。

为此，我使用

useEffect

挂钩将单击事件绑定到

document

对象 if

isOpen === true

:

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

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

  }, [isOpen]);

当用户第一次单击“打开模态”时，

isOpen

从

false

更改为

true

，这会导致组件重新渲染。重新渲染完成后，上面效果中的点击事件就被注册了。

问题

首次单击“打开模态”会导致

document

的单击事件触发（您可以在控制台中看到事件处理程序的输出）。这对我来说没有意义 -

document

上的点击事件怎么可能在第一次“打开模态”点击传播到它时就已经被注册了？

预期行为

第一次单击“打开模态”应该只会导致

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]
  );

演示链接这里

Answer 2

@user51462 在评论中发布了这个，这才是真正的答案。

这篇post提供了一些关于为什么使用它是一个坏主意的见解 使用 document.body 创建门户。我对原生 vs 不太了解 不过，合成事件来解释我帖子中的行为。