方法一:Dropdown 中使用属性menu
<Dropdown className={index.menu_logo} menu={{ items, onClick: handleMenuClick,}}>
<a className={index.menu_logo}>
<img className="ant-dropdown-link" onClick={e => e.preventDefault()} src={this.state.logourl} alt="头像" />
<span className={index.menu_loginname}>{this.state.loginname}</span>
</a>
</Dropdown>
如何定义items:
const items: MenuProps['items'] = [
{
label: <Space><SettingOutlined />修改密码</Space>,
key: '1',
},
{
label: <Space><PoweroffOutlined />退出登录</Space>,
key: '2',
},
];
关联事件:
const handleMenuClick= (e) => {
if(e.key === '1') {
this.modifyPass()
}
if(e.key==='2'){
this.loginOut()
}
};
最终实现效果:
方法二:Dropdown 中使用属性overlay
<Dropdown className={index.menu_logo} overlay={menu} >
<a className={index.menu_logo}>
<img className="ant-dropdown-link" onClick={e => e.preventDefault()} src={this.state.logourl} alt="头像" />
<span className={index.menu_loginname}>{this.state.loginname}</span>
</Dropdown>
如何定义overlay中的menu:
let menu = (
<Menu>
<Menu.Item key="2" onClick={()=>this.modifyPass()}>
<Space><SettingOutlined />修改密码</Space>
</Menu.Item>
<Divider dashed={false} />
<Menu.Item key="3" onClick={()=>this.loginOut()}>
<Space><PoweroffOutlined />退出登录</Space>
</Menu.Item>
</Menu>
);
实现效果:
两个方法都是实现,但是方法二实现中在edage浏览器中会这样的警告:
随着antd版本的不同可能还会在变化,overlay这个属性可能在比价低的版本中可以用到,我们看antd的官网,关于Dropdown中相关的api的介绍中已经没有了overlay的相关介绍
所以建议使用方法一
希望对你有所帮助