如何在 Ant Design 中禁用子菜单的点击事件？

Question

我想防止SubMenu在您单击它时打开和关闭其子菜单项。有没有办法做到这一点而不将其设置为disabled？（这会影响按钮的外观）我基本上希望子菜单看起来相同，而不切换其子菜单的功能。

Answer 1

要实现所需的行为，您需要使用像这样的openKeys和onOpenChange 属性的Menu组合：

const OPEN_KEYS = ['sub1'];

export default function App() {
  const [openKeys, setOpenKeys] = useState(OPEN_KEYS);
  const onOpenChange = openKeys => setOpenKeys([...OPEN_KEYS, ...openKeys]);
  return (
    <FlexBox>
      <Menu
        openKeys={openKeys}
        onOpenChange={onOpenChange}
      >
        ...
      </Menu>
    </FlexBox>
  );
}

在上面的例子中，OPEN_KEYS将始终保持打开状态，不会影响它的Menu.Item/Menu.ItemGroup孩子。