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