连接 Antd 的 Select 中的所有值

Question

我有一个带有选择的应用程序。如果我保存了多次选择值，我想连接选择中的所有值。

例如，如果我选择水果，然后再选择一个，那么我希望拥有所有值，而不是像现在这样每次都覆盖以前的值。

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

如何做到这一点？ 链接到我的应用程序：https://codesandbox.io/s/hide-already-selected-ant-design-demo-46ojt

Answer 1

添加一个值为 multiple 的道具 mode 会起作用

参考Ant Select document

模式
设置 Select 的模式
类型：多个 |标签

价值
当前选择的选项。
类型：string|string[], number|number[], LabeledValue|LabeledValue[]

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