mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 03:14:07 +08:00
6776bb8916
* docs: update demo * chore: add script * test: fix demo test * docs: convert demos * chore: move script * test: remove react-dom import * chore: update deps * docs: update riddle js * test: fix image test * docs: fix riddle demo
53 lines
1.0 KiB
Markdown
53 lines
1.0 KiB
Markdown
---
|
|
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(item => (
|
|
<Select.Option key={item} value={item}>
|
|
{item}
|
|
</Select.Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default () => <SelectWithHiddenSelectedOptions />;
|
|
```
|