Щелчок правой кнопкой мыши на срабатывании вложенного компонента дважды реагирует

Question

Я использую компонент дерева пользовательского интерфейса материала, который представляет собой набор вложенных компонентов 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, остановив его распространение.

• SyntheticEvent
• Event.stopPropagation

Метод stopPropagation() интерфейса Event предотвращает дальнейшее распространение текущего события в фазах захвата и восходящей цепочки. Однако это не предотвращает возникновение поведения по умолчанию; например, переходы по ссылкам все еще обрабатываются. Если вы хотите остановить такое поведение, воспользуйтесь методом preventDefault().

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