You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.0 KiB
53 lines
1.0 KiB
6 years ago
|
---
|
||
|
|
order: 22
|
||
|
|
title:
|
||
|
|
zh-CN: 已隐藏已选中
|
||
|
|
en-US: Hide Already Selected
|
||
|
|
---
|
||
|
|
|
||
|
|
## zh-CN
|
||
|
|
|
||
|
|
隐藏下拉列表中已选择的选项。
|
||
|
|
|
||
|
|
## en-US
|
||
|
|
|
||
|
|
Hide already selected options in the dropdown.
|
||
|
|
|
||
|
|
````jsx
|
||
|
|
import { Select } from 'antd';
|
||
|
|
|
||
|
|
const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
|
||
|
|
|
||
|
|
class SelectWithHiddenSelectedOptions extends React.Component {
|
||
|
|
state = {
|
||
|
|
selectedItems: [],
|
||
|
|
};
|
||
|
|
|
||
|
|
handleChange = selectedItems => {
|
||
|
|
this.setState({ selectedItems });
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { selectedItems } = this.state;
|
||
|
|
const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
|
||
|
|
return (
|
||
|
|
<Select
|
||
|
|
mode="multiple"
|
||
|
|
placeholder="Inserted are removed"
|
||
|
|
value={selectedItems}
|
||
|
|
onChange={this.handleChange}
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
>
|
||
|
|
{filteredOptions.map(o => (
|
||
|
|
<Select.Option key={o} value={o}>
|
||
|
|
{o}
|
||
|
|
</Select.Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ReactDOM.render(<SelectWithHiddenSelectedOptions />, mountNode);
|
||
|
|
````
|