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

Question

我正在使用 material 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>
  );
}

Answer 1

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

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method.

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

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

Right click on nested component triggering twice react

javascript

reactjs

material-ui

mouseevent