2016-10-31 19:31:43 +08:00
---
2017-01-23 22:24:36 +08:00
order: 5
2016-10-31 19:31:43 +08:00
title:
zh-CN: 多个按钮组合
en-US: Multiple Buttons
---
## zh-CN
2019-05-07 14:57:32 +08:00
按钮组合使用时,推荐使用 1 个主操作 + n 个次操作, 3 个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
2016-10-31 19:31:43 +08:00
## en-US
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button` .
2019-05-07 14:57:32 +08:00
```jsx
2019-08-13 14:07:17 +08:00
import { Button, Menu, Dropdown } from 'antd';
2019-11-28 12:34:33 +08:00
import { DownOutlined } from '@ant-design/icons';
2016-10-31 19:31:43 +08:00
function handleMenuClick(e) {
console.log('click', e);
}
const menu = (
< Menu onClick = {handleMenuClick} >
< Menu.Item key = "1" > 1st item< / Menu.Item >
< Menu.Item key = "2" > 2nd item< / Menu.Item >
< Menu.Item key = "3" > 3rd item< / Menu.Item >
< / Menu >
);
ReactDOM.render(
< div >
< Button type = "primary" > primary< / Button >
2017-02-04 22:35:33 +08:00
< Button > secondary< / Button >
2016-10-31 19:31:43 +08:00
< Dropdown overlay = {menu} >
2017-02-04 22:35:33 +08:00
< Button >
2019-11-28 12:34:33 +08:00
Actions < DownOutlined / >
2016-10-31 19:31:43 +08:00
< / Button >
< / Dropdown >
< / div > ,
2019-05-07 14:57:32 +08:00
mountNode,
2016-10-31 19:31:43 +08:00
);
2019-05-07 14:57:32 +08:00
```