📝 Add instruction for dropdownRender

This commit is contained in:
afc163 2019-09-24 22:37:34 +08:00
parent c9a30ef766
commit 2de1a15da9
No known key found for this signature in database
GPG Key ID: 5F00908D72002306
3 changed files with 58 additions and 21 deletions

View File

@ -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);
```

View File

@ -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).

View File

@ -97,3 +97,9 @@ title: Select
| ----- | ---- | --------------------- | ------ | ---- |
| key | | string | - | |
| label | 组名 | string\|React.Element | 无 | |
## FAQ
### 点击 `dropdownRender` 里的内容浮层关闭怎么办?
看下 [dropdownRender 例子](/components/select-cn/#components-select-demo-custom-dropdown-menu) 里的说明。