如何在 ant-design 下拉叠加层中创建反应门户

Question

我正在使用 ant-design Dropdown 组件，其中包含右键单击操作。

我希望能够一次增加 5 或 10。但是，无论何时单击它，它都会忽略 Menu.Item.

的 onClick 侦听器的那个

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 table 列 header 同时还支持排序。

Answer 1

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

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

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

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

并将我们的 Menu.Item onClick 回调更新到此

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

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

如何在 ant-design 下拉叠加层中创建反应门户

How to create a react portal within ant-design dropdown overlay

javascript

reactjs

antd

react-portal