如何为Ant Design下拉菜单中带子项的菜单项添加点击事件？

在你的代码中，带有子菜单的父菜单项（teamA）默认只会触发展开/收起子菜单的行为，不会触发Menu的onClick回调。要让它触发handleMenuClick，可以通过以下两种方式解决：

方法一：给父菜单项设置selectable: true #

修改items数组，给teamA对应的菜单项添加selectable: true属性，标记父菜单项为可选择状态，点击时就会触发全局的onClick事件：

const items: MenuProps['items'] = [
  {
    key: '1',
    label: 'Company',
  },
  {
    key: '2',
    label: 'teamA',
    selectable: true, // 开启父菜单项的点击事件触发
    children: [
      {
        key: '2-1',
        label: 'teamA-a',
      },
    ],
  }
];

此时点击teamA，handleMenuClick会被触发，你可以通过e.key区分点击的菜单项：

const handleMenuClick: MenuProps['onClick'] = (e) => {
  if (e.key === '2') {
    message.info('Click on teamA.');
  } else {
    message.info('Click on menu item.');
  }
  console.log('click', e);
};

方法二：给父菜单项单独绑定点击事件 #

如果不需要全局统一处理，也可以直接在父菜单项上单独绑定onClick回调：

const items: MenuProps['items'] = [
  {
    key: '1',
    label: 'Company',
  },
  {
    key: '2',
    label: 'teamA',
    children: [
      {
        key: '2-1',
        label: 'teamA-a',
      },
    ],
    onClick: () => {
      message.info('Clicked teamA directly');
      console.log('click teamA');
    },
  }
];

额外修复：修正Dropdown按钮的显示问题 #

你的代码中{items[3]?.label}存在数组越界问题（items仅包含2个元素，索引最大为1），可以改为默认显示固定文本，或根据选中状态动态切换：

<Button>
  <Space>
    {'选择团队'}
    <DownOutlined />
  </Space>
</Button>

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