Browse Source

docs: Update demo (#19059)

* docs: Update demo

* fix lint
pull/19114/head
二货机器人 5 years ago
committed by GitHub
parent
commit
1c5f1cb7a6
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 31
      components/select/demo/custom-dropdown-menu.md

31
components/select/demo/custom-dropdown-menu.md

@ -14,7 +14,7 @@ title:
Customize the dropdown menu via `dropdownRender`.
```jsx
import { Select, Divider } from 'antd';
import { Select, Divider, Input } from 'antd';
import { Plus } from '@ant-design/icons';
const { Option } = Select;
@ -24,18 +24,26 @@ let index = 0;
class App extends React.Component {
state = {
items: ['jack', 'lucy'],
name: '',
};
onNameChange = event => {
this.setState({
name: event.target.value,
});
};
addItem = () => {
console.log('addItem');
const { items } = this.state;
const { items, name } = this.state;
this.setState({
items: [...items, `New item ${index++}`],
items: [...items, name || `New item ${index++}`],
name: '',
});
};
render() {
const { items } = this.state;
const { items, name } = this.state;
return (
<Select
style={{ width: 240 }}
@ -44,12 +52,15 @@ class App extends React.Component {
<div>
{menu}
<Divider style={{ margin: '4px 0' }} />
<a
style={{ padding: '8px', display: 'block', cursor: 'pointer' }}
onClick={this.addItem}
>
<Plus /> Add item
</a>
<div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
<Input style={{ flex: 'auto' }} value={name} onChange={this.onNameChange} />
<a
style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
onClick={this.addItem}
>
<Plus /> Add item
</a>
</div>
</div>
)}
>

Loading…
Cancel
Save