0

我正在使用带有右键单击操作的ant-design Dropdown组件。

我希望能够一次增加 5 或 10。但是，每当单击它时，它都会忽略 onClick 侦听器的Menu.Item.

const App = () => {
  const [counter, setCounter] = useState(1);

  const menu = (
    <Menu>
      <Menu.Item key="five" onClick={() => setCounter(counter + 5)}>
        by 5
      </Menu.Item>
      <Menu.Item key="ten" onClick={() => setCounter(counter + 10)}>
        by 10
      </Menu.Item>
    </Menu>
  );

  return (
    <div>
      <p>Counter: {counter}</p>
      <div onClick={() => setCounter(counter + 1)} style={STYLING}>
        <p>Click here to increment</p>
        <Dropdown overlay={menu} trigger={["contextMenu"]}>
          <span>
            Right click here for custom increment
          </span>
        </Dropdown>
      </div>
    </div>
  );
};

Codesandbox 示例：https ://codesandbox.io/s/contextmenu-with-dropdown-antd-n4c5i?file=/index.js

我尝试过使用 ReactDOM.createPortal，但我只是不知道如何在像这样的场景中正确使用它。

我知道我可能不应该使用 createPortal 解决方案，但我需要它的原因不是为了这个简单的示例，而是我希望在 ant-design 表列标题中具有此功能，同时还具有排序支持。

4

1 回答 1

1

我想我不需要使用门户。相反，我可以使用stopPropagation来防止任何父节点获取 onClick 事件。

在Menu.ItemonClick 事件中，标准 javascript 事件在domEvent字段下可用。

所以我们可以创建一个这样的函数：

const menuOnClick = (amount) => (e) => {
  e.domEvent.stopPropagation();
  setCounter(counter + amount);
};

并将我们的Menu.ItemonClick 回调更新为此

<Menu.Item key="five" onClick={menuOnClick(5)}>

沙盒示例：https ://codesandbox.io/s/contextmenu-with-dropdown-antd-solution-8029o?file=/index.js

于 2021-09-21T11:47:50.733 回答