ant-design/components/dropdown/demo/event.md

42 lines
847 B
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 4
2016-07-04 10:48:21 +08:00
title:
zh-CN: 触发事件
en-US: Click event
2016-03-31 09:40:55 +08:00
---
2015-06-09 13:46:47 +08:00
2016-07-04 10:48:21 +08:00
## zh-CN
2015-06-09 13:46:47 +08:00
点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。
2016-07-04 10:48:21 +08:00
## en-US
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
2017-02-13 10:55:53 +08:00
````jsx
2018-11-28 15:00:03 +08:00
import {
Menu, Dropdown, Icon, message,
} from 'antd';
2018-06-27 15:55:04 +08:00
2018-11-28 15:00:03 +08:00
const onClick = ({ key }) => {
message.info(`Click on item ${key}`);
2015-06-09 18:08:56 +08:00
};
2015-06-09 13:46:47 +08:00
const menu = (
<Menu onClick={onClick}>
<Menu.Item key="1">1st menu item</Menu.Item>
<Menu.Item key="2">2nd memu item</Menu.Item>
<Menu.Item key="3">3rd menu item</Menu.Item>
</Menu>
);
2015-06-09 13:46:47 +08:00
2015-10-20 16:47:55 +08:00
ReactDOM.render(
2015-06-09 13:46:47 +08:00
<Dropdown overlay={menu}>
2015-12-02 15:18:15 +08:00
<a className="ant-dropdown-link" href="#">
Hover me, Click menu item <Icon type="down" />
2015-12-02 15:18:15 +08:00
</a>
2018-06-27 15:55:04 +08:00
</Dropdown>,
2018-11-28 15:00:03 +08:00
mountNode
);
2015-06-09 13:46:47 +08:00
````