ant-design/components/dropdown/demo/event.md
二货机器人 a67d39cd6c
feat: Menu support items (#34559)
* docs: Update Menu cn doc

* chore: update ts def

* chore: support convert

* docs: more demo

* docs: more demo

* docs: all menu demos

* docs: dropdown demo

* docs: dropdown all demos

* docs: update demo

* test: coverage

* docs: more demo

* docs: layout demo

* docs: all demo

* chore: fix ts lint

* docs: fix doc

* docs: all docs
2022-03-18 15:20:35 +08:00

980 B

order title
4
zh-CN en-US
触发事件 Click event

zh-CN

点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。

en-US

An event will be triggered when you click menu items, in which you can make different operations according to item's key.

import { Menu, Dropdown, message } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const onClick = ({ key }) => {
  message.info(`Click on item ${key}`);
};

const menu = (
  <Menu
    onClick={onClick}
    items={[
      {
        label: '1st menu item',
        key: '1',
      },
      {
        label: '2nd menu item',
        key: '2',
      },
      {
        label: '3rd menu item',
        key: '3',
      },
    ]}
  />
);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
      Hover me, Click menu item <DownOutlined />
    </a>
  </Dropdown>,
  mountNode,
);