ant desgin react Dropdown组件的使用问题

Question

这里如何显示当前选择菜单的label

相关位置代码

  render() {
        return (
            <div className="Login">
                <div>
                    <Dropdown arrow = {true} autoFocus = {true} trigger={['click']} menu={this.state.languageMenu}>
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                选择语言
                                <DownOutlined/>
                            </Space>
                        </a>
                    </Dropdown>
                </div>
            </div>
        );
    }

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

好的，我们来详细分析并解决这个问题。用户希望在Ant Design React的Dropdown组件中显示当前选择的菜单项的标签。

分析问题

1. Dropdown组件的基本使用：用户已经正确地使用了Dropdown组件，并设置了触发方式和菜单项。
2. 显示当前选择的菜单项：用户需要在Dropdown组件旁边显示当前选择的菜单项的标签。

解决方案

为了实现这一功能，我们需要以下步骤：

1. 维护当前选择的菜单项：在组件的状态中维护当前选择的菜单项。
2. 处理菜单项选择事件：在菜单项选择时更新状态。
3. 显示当前选择的菜单项：在Dropdown组件旁边显示当前选择的菜单项的标签。

具体实现

1. 定义菜单项和状态：

   state = {
       languageMenu: {
           items: [
               { label: '中文', key: 'zh' },
               { label: 'English', key: 'en' },
               // 其他语言项
           ],
           onClick: this.handleMenuClick,
       },
       selectedLanguage: '选择语言', // 初始显示的文本
   };
   

2. 处理菜单项选择事件：

   handleMenuClick = ({ key }) => {
       const selectedItem = this.state.languageMenu.items.find(item => item.key === key);
       this.setState({ selectedLanguage: selectedItem.label });
   };
   

3. 渲染组件：

   render() {
       return (
           <div className="Login">
               <div>
                   <Dropdown arrow={true} autoFocus={true} trigger={['click']} menu={this.state.languageMenu}>
                       <a onClick={(e) => e.preventDefault()}>
                           <Space>
                               {this.state.selectedLanguage}
                               <DownOutlined />
                           </Space>
                       </a>
                   </Dropdown>
               </div>
           </div>
       );
   }
   

完整代码

import React from 'react';
import { Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';

class Login extends React.Component {
    state = {
        languageMenu: {
            items: [
                { label: '中文', key: 'zh' },
                { label: 'English', key: 'en' },
                // 其他语言项
            ],
            onClick: this.handleMenuClick,
        },
        selectedLanguage: '选择语言', // 初始显示的文本
    };

    handleMenuClick = ({ key }) => {
        const selectedItem = this.state.languageMenu.items.find(item => item.key === key);
        this.setState({ selectedLanguage: selectedItem.label });
    };

    render() {
        return (
            <div className="Login">
                <div>
                    <Dropdown arrow={true} autoFocus={true} trigger={['click']} menu={this.state.languageMenu}>
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                {this.state.selectedLanguage}
                                <DownOutlined />
                            </Space>
                        </a>
                    </Dropdown>
                </div>
            </div>
        );
    }
}

export default Login;

解释

1. state：定义了languageMenu和selectedLanguage状态，分别用于存储菜单项和当前选择的语言标签。
2. handleMenuClick：处理菜单项选择事件，更新selectedLanguage状态。
3. render：在Dropdown组件旁边显示当前选择的语言标签。

这样，用户在选择菜单项后，Dropdown组件旁边会显示当前选择的菜单项的标签。希望这个解决方案能帮助到您！

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑