连接 Antd 的 Select 中的所有值

Question

I have an application with a select. I want to concatenate all values from select if I saved many times the select value.

For example, if I chose fruit, after that another one and so one I want to have all values, not to override each time the previous value like now.

 const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"]; class SelectWithHiddenSelectedOptions extends React.Component { state = { selectedItems: [] }; handleChange = selectedItems => { this.setState({ selectedItems }); }; save = () => { console.log(this.state.selectedItems); // here i want to concatenate all values }; render() { const { selectedItems } = this.state; const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o)); return ( <div> <Select 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> <button onClick={this.save}>click</button> <h1>{this.selectedItems}</h1> </div> ); } }

How to achieve this? link to my app: https://codesandbox.io/s/hide-already-selected-ant-design-demo-46ojt

Answer 1

Add a prop mode with value multiple would work

Refer to Ant Select document

mode
Set mode of Select
Type: multiple | tags

value
Current selected option.
Type: string|string[], number|number[], LabeledValue|LabeledValue[]

<Select
  mode='multiple'
  ...
/>