如何关闭``react select`中的``deselect option`？

Question

我希望使用react-select multi Select组件，并且能够多次选择相同的选项。但是，react-select不允许这样做。您可以使用hideSelectOptions={false}更改下拉列表以显示已选择的选项，但如果您再次选择其中一个选项，它将被取消选择。

这个问题#3234描述了同样的问题，并且sugggests解决这个问题的一种方法是以某种方式处理onChange的action参数。

下面是我尝试的基于suggested solution的解决方案

import React, { Component } from "react";
import Select from "react-select";


export default class MultiSelect extends Component<*, State> {
  handleChange(option, action) {
    console.log(option, action);
    // return;
    if (action === "deselect-option") {
      action = "select-option";
      // now how do I do the component's state?
    }
  }

  render() {
    return (
      <Select
        isMulti
        className="basic-single"
        classNamePrefix="select"
        name="color"
        options={[{"label": "hello", "value": "hello"}, {"label": "world", "value": "world"}]}
        hideSelectedOptions={false}
        onChange={this.handleChange}
      />
    );
  }
}

我希望能够多次输入"hello“，但当我再次尝试输入"hello”时，它被删除了。

Answer 1

在options中，数据字段使用任何键来动态化值，在本例中，使用Date.now()来动态化。然后使用操作'select- option‘追加到选项，使用操作’remove-value‘筛选标签与所选选项标签匹配的选项数据字段中的所有字段，并追加到数据并将另一个对象追加到选项数据字段

options = [
{ value: Date.now(), label: "SUBJECT" ,val:"SUBJ" },
{ value: Date.now, label: "VERB", val:"VERB" }
]

<Select options={options} isMulti onChange={(e, option) => {
if (option.action === "select-option") {
    Options=[
    ...Options,
    {
        value: option.option.value + "_" + Date.now(),
        label: option.option.label
    }
    ];
} else if (option.action === "remove-value" ||option.action ===  "pop-value") {

    tempData = data.filter(opt => opt.label !== option.removedValue.label)
    Options=[
    ...tempData,
    {
        value: option.removedValue.value + "_" + Date.now(),
        label: option.removedValue.label
    }
    ]
}
}
} />