没有 DOM 嵌套的 React 事件冒泡

Question

对于上下文，<NavTreeItem> 是 material-ui <TreeItem> 而 <OpenDialogButton> 是 material-ui <Button>.

我有一个这样的组件（简化版）：

function pushLink() {
  // ...
}

function openDialog(event) {
  event.stopPropagation();
  // ...
}

<NavTreeItem onClick={pushLink}>
  <OpenDialogButton onClick={openDialog} />
  ...
  {dialogIsOpen && <Dialog />}
</NavTreeItem>

假设 openDialog() 和 pushLink() 都没有被执行。如果我单击 <OpenDialogButton> 打开对话框，它会运行 openDialog() 执行 event.stopPropagation() 这样事件就不会冒泡到树项并执行 pushLink() - 就像预期的。当 <Dialog> 提交给 DOM 时，它 而不是 嵌套在 <NavTreeItem> 中 - 正如预期的那样。到目前为止，只执行了openDialog()。

但是当我单击 <Dialog> 元素（或其背景）时，它会执行 pushLink() - 不良行为。看起来好像点击事件冒泡到 <NavTreeItem> 元素 - 即使 <Dialog> 元素没有嵌套在 DOM 中。为什么会这样？我该怎么做才能避免这种情况发生？

Answer 1

这是我找到的解决方案：

<NavTreeItem onClick={pushLink}>
  <OpenDialogButton onClick={openDialog} />
  ...
  <div onClick={(event) => event.stopPropagation()}>
    {dialogIsOpen && <Dialog />}
  </div>
</NavTreeItem>

没有 DOM 嵌套的 React 事件冒泡

React event bubbling without DOM nesting

javascript

dom

dom-events

reactjs