mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
📝 Add instruction for dropdownRender
This commit is contained in:
parent
c9a30ef766
commit
2de1a15da9
@ -7,34 +7,59 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `dropdownRender` 对下拉菜单进行自由扩展。
|
||||
使用 `dropdownRender` 对下拉菜单进行自由扩展。自定义内容点击时会关闭浮层,如果不喜欢关闭,可以添加 `onMouseDown={e => e.preventDefault()}` 进行阻止(更多详情见 [#13448](https://github.com/ant-design/ant-design/issues/13448))。
|
||||
|
||||
## en-US
|
||||
|
||||
Customize the dropdown menu via `dropdownRender`.
|
||||
Customize the dropdown menu via `dropdownRender`. The selection will be closed if click `dropdownRender` area, you can prevent it by wrapping `onMouseDown={e => e.preventDefault()}` (see more at [#13448](https://github.com/ant-design/ant-design/issues/13448)).
|
||||
|
||||
```jsx
|
||||
import { Select, Icon, Divider } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
ReactDOM.render(
|
||||
<Select
|
||||
defaultValue="lucy"
|
||||
style={{ width: 120 }}
|
||||
dropdownRender={menu => (
|
||||
<div>
|
||||
{menu}
|
||||
<Divider style={{ margin: '4px 0' }} />
|
||||
<div style={{ padding: '8px', cursor: 'pointer' }}>
|
||||
<Icon type="plus" /> Add item
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Option value="jack">Jack</Option>
|
||||
<Option value="lucy">Lucy</Option>
|
||||
</Select>,
|
||||
mountNode,
|
||||
);
|
||||
let index = 0;
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
items: ['jack', 'lucy'],
|
||||
};
|
||||
|
||||
addItem = () => {
|
||||
console.log('addItem');
|
||||
const { items } = this.state;
|
||||
this.setState({
|
||||
items: [...items, `New item ${index++}`],
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { items } = this.state;
|
||||
return (
|
||||
<Select
|
||||
style={{ width: 240 }}
|
||||
placeholder="custom dropdown render"
|
||||
dropdownRender={menu => (
|
||||
<div>
|
||||
{menu}
|
||||
<Divider style={{ margin: '4px 0' }} />
|
||||
<div
|
||||
style={{ padding: '4px 8px', cursor: 'pointer' }}
|
||||
onMouseDown={e => e.preventDefault()}
|
||||
onClick={this.addItem}
|
||||
>
|
||||
<Icon type="plus" /> Add item
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{items.map(item => (
|
||||
<Option key={item}>{item}</Option>
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
@ -94,3 +94,9 @@ Select component to select value from options.
|
||||
| -------- | ----------- | --------------------- | ------- | ------- |
|
||||
| key | | string | - | |
|
||||
| label | Group label | string\|React.Element | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
### The dropdown is closed when click `dropdownRender` area?
|
||||
|
||||
See the [dropdownRender example](/components/select/#components-select-demo-custom-dropdown-menu).
|
||||
|
@ -97,3 +97,9 @@ title: Select
|
||||
| ----- | ---- | --------------------- | ------ | ---- |
|
||||
| key | | string | - | |
|
||||
| label | 组名 | string\|React.Element | 无 | |
|
||||
|
||||
## FAQ
|
||||
|
||||
### 点击 `dropdownRender` 里的内容浮层关闭怎么办?
|
||||
|
||||
看下 [dropdownRender 例子](/components/select-cn/#components-select-demo-custom-dropdown-menu) 里的说明。
|
||||
|
Loading…
Reference in New Issue
Block a user