右键单击嵌套组件触发两次反应答案

【问题标题】：Right click on nested component triggering twice react右键单击嵌套组件触发两次反应
【发布时间】：2023-03-06 17:22:01
【问题描述】：

我正在使用材质 ui 的树组件，它是一堆嵌套的 treeItem 组件。我想在每个单独的树节点上都有一个 rightClick 事件触发器。但是，我使用 onContextMenu 来执行此操作，因为我的组件是嵌套的，所以当我右键单击内部组件时，右键单击事件会触发两次，一次用于我刚刚右键单击的内部组件，一次用于其父组件。有什么想法可以阻止这种情况发生吗？

我的代码：

function Tree( props ) {

  // Recursively generate tree items passed to component
  const renderTree = ( nodes ) => (
    <TreeItem key = {nodes.id} nodeId = {nodes.id} label = {nodes.name} onContextMenu = {rightClick}>
      {Array.isArray( nodes.children ) ? nodes.children.map( (node) => renderTree(node) ) : null}
    </TreeItem>
  )

  const rightClick = (event) => {
    event.preventDefault();
    alert("LOL")
  }

  return (
    <div>
    <TreeView
      defaultCollapseIcon = {<ExpandMoreIcon />}
      defaultExpandIcon = {<ChevronRightIcon />}
      multiSelect>
      {renderTree( props.treeItems )}
    </TreeView>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs material-ui mouseevent

【解决方案1】：

您还可以通过停止传播来阻止事件在 DOM 中冒泡。

Event 接口的 stopPropagation() 方法可以进一步防止在捕获和冒泡阶段传播当前事件。但是，它不会阻止任何默认行为的发生；例如，仍然会处理对链接的点击。如果你想停下来这些行为，请参阅preventDefault() 方法。

const rightClick = (event) => {
  event.preventDefault();
  event.stopPropagation()
  alert("LOL")
}

【讨论】：