reactjs - 如何禁用 `deselect-option` 中的 `react-select` ？

Question

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

本期#3234描述了同样的问题和 sugggests解决这个问题的一种方法是处理 action论据 onChange不知何故。

这是我尝试基于 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

在选项中，数据字段使用任何键使值动态化，在这种情况下，使用 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
    }
    ]
}
}
} />