React项目中如何让Antd下拉菜单的动态子菜单可点击？

Ant Design的Menu组件中，默认带children的子菜单（SubMenu）仅作为展开/收起的触发器，不会触发Menu的onClick事件。要实现点击子菜单标题也能触发自定义函数，可通过以下两种方式解决：

方法一：通过items配置开启点击触发 #

在子菜单的配置项中添加clickable: true，这样点击子菜单标题时，既会触发Menu的onClick事件，也能正常保留展开/收起功能。之后在事件处理函数中判断点击的key是否为子菜单的key，执行对应的逻辑。

import { Menu, Dropdown, Button, ApartmentOutlined } from 'antd';

class YourComponent extends React.Component {
  handleMenuClick = (e) => {
    // 区分点击的是子菜单还是普通菜单项
    if (e.key === 'submenu') {
      console.log('子菜单被点击了');
      // 在这里编写子菜单的点击逻辑
    } else {
      console.log('普通菜单项被点击:', e.key);
    }
  };

  render() {
    const items = [
      { label: 'item 1 label', key: 'item-1' },
      { label: 'item 2 label', key: 'item-2', disabled: false },
      { label: 'item 4 label', key: 'item-4', disabled: false, icon: null, children: null },
      {
        label: 'sub menu',
        key: 'submenu',
        icon: <ApartmentOutlined />,
        clickable: true, // 开启子菜单点击触发事件
        children: [{ label: 'item 3', key: 'submenu-item-1' }]
      },
    ];

    const menu = (
      <Menu items={items} onClick={this.handleMenuClick} />
    );

    return (
      <Dropdown overlay={menu} trigger={['click']}>
        <Button>点击展开菜单</Button>
      </Dropdown>
    );
  }
}

方法二：手动渲染SubMenu自定义逻辑 #

如果需要更灵活的控制（比如点击子菜单标题只触发事件，不展开/收起），可以手动编写Menu的结构，给SubMenu单独绑定点击事件，同时通过state控制展开状态。

import { Menu, Dropdown, Button, ApartmentOutlined } from 'antd';
import { useState } from 'react';

const YourComponent = () => {
  const [subMenuOpen, setSubMenuOpen] = useState(false);

  const handleSubMenuClick = () => {
    console.log('子菜单标题被点击');
    // 编写子菜单的点击逻辑
    // 若需要切换展开状态，就调用下面的方法；不需要则注释掉
    setSubMenuOpen(!subMenuOpen);
  };

  const handleMenuItemClick = (e) => {
    console.log('菜单项被点击:', e.key);
  };

  return (
    <Dropdown
      overlay={
        <Menu onClick={handleMenuItemClick}>
          <Menu.Item key="item-1">item 1 label</Menu.Item>
          <Menu.Item key="item-2">item 2 label</Menu.Item>
          <Menu.Item key="item-4">item 4 label</Menu.Item>
          <Menu.SubMenu
            title="sub menu"
            key="submenu"
            icon={<ApartmentOutlined />}
            open={subMenuOpen}
            onClick={handleSubMenuClick}
          >
            <Menu.Item key="submenu-item-1">item 3</Menu.Item>
          </Menu.SubMenu>
        </Menu>
      }
      trigger={['click']}
    >
      <Button>点击展开菜单</Button>
    </Dropdown>
  );
};

注意事项 #

• clickable属性仅在Ant Design v4及以上版本支持，若使用旧版本请优先考虑方法二。
• 手动控制展开状态时，务必通过open属性绑定state，避免和组件默认的展开逻辑冲突。

内容的提问来源于stack exchange，提问作者Eclectic Traveler