如何在Ant Design中获取选中菜单项的值并实现按钮动态显示选中项名称

阿华AIGC实验室

2026-4-27

在Ant Design中实现选中菜单项值获取与按钮文本切换

我来帮你解决这个Ant Design的交互需求，其实用Dropdown组件配合React状态管理就能轻松实现，下面一步步给你讲清楚：

核心思路

通过React的状态（useState或类组件的state）追踪选中的菜单项名称，点击菜单项时更新状态，从而让按钮文本自动切换；同时在点击事件中可以直接获取到选中项的标识（比如名称、ID等）。

具体实现步骤（函数组件版本）

1. 初始化状态

用useState定义状态，初始值设为你需要的默认文本'Select User Name'：

const [selectedName, setSelectedName] = useState('Select User Name');

2. 编写菜单项点击处理函数

这个函数会在用户点击菜单项时触发，通过事件参数获取选中项的key（也就是我们给菜单项设置的标识），然后更新状态：

const handleMenuClick = ({ key }) => {
  // 更新按钮显示的名称
  setSelectedName(key);
  
  // 这里可以获取选中项的其他值（比如ID）
  // 假设你有用户列表数据
  // const selectedUser = userList.find(user => user.name === key);
  // console.log('选中用户的ID:', selectedUser.id);
};

3. 构建下拉菜单与Dropdown组件

将Menu作为Dropdown的下拉面板，按钮作为触发元素，按钮文本绑定状态值：

const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="Alice">Alice</Menu.Item>
    <Menu.Item key="Bob">Bob</Menu.Item>
    <Menu.Item key="Charlie">Charlie</Menu.Item>
  </Menu>
);

return (
  <Dropdown overlay={menu} trigger={['click']}>
    <Button>{selectedName}</Button>
  </Dropdown>
);

完整代码示例

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

const UserSelector = () => {
  const [selectedName, setSelectedName] = useState('Select User Name');

  const handleMenuClick = ({ key }) => {
    setSelectedName(key);
    // 如需获取选中项的其他值，可在此处扩展逻辑
  };

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="Alice">Alice</Menu.Item>
      <Menu.Item key="Bob">Bob</Menu.Item>
      <Menu.Item key="Charlie">Charlie</Menu.Item>
    </Menu>
  );

  return (
    <Dropdown overlay={menu} trigger={['click']}>
      <Button>{selectedName}</Button>
    </Dropdown>
  );
};

export default UserSelector;

类组件版本（可选）

如果你的项目还在用类组件，逻辑是一样的，只是用this.state管理状态：

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

class UserSelector extends React.Component {
  state = {
    selectedName: 'Select User Name',
  };

  handleMenuClick = ({ key }) => {
    this.setState({ selectedName: key });
    // 获取其他值的逻辑同理
  };

  render() {
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="Alice">Alice</Menu.Item>
        <Menu.Item key="Bob">Bob</Menu.Item>
        <Menu.Item key="Charlie">Charlie</Menu.Item>
      </Menu>
    );

    return (
      <Dropdown overlay={menu} trigger={['click']}>
        <Button>{this.state.selectedName}</Button>
      </Dropdown>
    );
  }
}

export default UserSelector;