Меню правого клика, запускающее событие щелчка его родительского пункта меню

Question

Я пытаюсь добавить контекстное меню в пункт меню. Я думаю, что справился с этим, но после щелчка по элементу в меню, вызываемом правой кнопкой мыши, действие щелчка по пункту меню также срабатывает. Любая идея? Пример: https://codesandbox.io/s/q8nl4ypq49

Редактировать: Мой код для реагирующего компонента

import React from "react";
import ReactDOM from "react-dom";
import Popup from "./Popup";
import Table from "antd/lib/table";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import { columns, data } from "./data";
import "antd/dist/antd.css";

const menu = (
  <Menu>
    <Menu.Item
      onClick={e => {
        alert("clicked");
      }}
    >
      click
    </Menu.Item>
    <Menu.Item>Like it</Menu.Item>
    <Menu.Item>Bookmark</Menu.Item>
  </Menu>
);

class App extends React.Component {
  render() {
    return (
      <div>
        <Menu mode="horizontal">
          <Menu.Item
            key="1"
            onClick={() => {
              alert("parent clicked");
            }}
          >
            <Dropdown overlay={menu} trigger={[`contextMenu`]}>
              <span style={{ userSelect: "none" }}> right click </span>
            </Dropdown>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

const APP_NODE = document.getElementById(`container`);
ReactDOM.render(<App />, APP_NODE);

Answer 1

Вам нужно остановить распространение на дочерние элементы, потому что в JavaScript событие клика вверх по дереву DOM.

const menu = (
  <Menu>
    <Menu.Item
      onClick={e => {
         e.domEvent.stopPropagation();
         alert("clicked");
      }}
      click
    </Menu.Item>
    <Menu.Item >Like it</Menu.Item>
    <Menu.Item>Bookmark</Menu.Item>
  </Menu>
);