有没有什么方法我可以使用isMulti而不删除我已经选择的选项？换句话说，有重复/重复选择的选项？

Question

基本上，我想使用react-select库并使用isMulti prop，但选择一个选项后的问题，该值将被删除。正如您在下面看到的所提供的图像，只要我点击“US：1”，该选项就会消失。但对于我正在尝试构建的应用程序，客户肯定可能需要2个相同的大小。因此他们会选择2“US：1”并自动将数量设置为2.问题是，一旦他们选择“US：1”，该选项就会消失。

这就是我现在所拥有的一切。

const options = [
    {value: 1, label: "US: 1"},
    {value: 1.25, label: "US: 1.25"},
    {value: 1.5, label: "US: 1.5"},
    {value: 1.75, label: "US: 1.75"},
    {value: 2, label: "US: 2"},
    {value: 2.25, label: "US: 2.25"},
]
class Details extends Component {
 state={
        selectedOption: []
    }
 handleChange = (selectedOption) => {
        this.setState({ selectedOption: selectedOption });

    }
render() {

<Select isMulti={true} isSearchable={true} onClick={value.changeSize(id, selectedOption)} value={selectedOption} onChange={this.handleChange} options={options}></Select>
}
}

这是我正在谈论的一个例子。当我希望保留该选项时，“US：1”会在点击时消失。我在想它会改变我的“选项”数组并显示没有点击选项的新数组。如果我能以某种方式继续喂食这些原始值，那么每次onChange之后都会很棒。我不知道如何深入到图书馆如何做到这一点，或者甚至可能。 https://www.npmjs.com/package/react-select

Answer 1

我在这里怎么做：

class Details extends Component {
  state = {
    selectedOption: []
  };
  handleChange = selectedOption => {
    const newSelectedOption = selectedOption.map(opt => ({
      label: opt.label,
      innerValue: opt.value,
      // I set a random value because it is needed to be able to delete the value without deleting all of them
      value: Math.random()
    }));
    this.setState({ selectedOption: newSelectedOption });
  };
  render() {
    return (
      <Select
        isMulti={true}
        isSearchable={true}
        value={this.state.selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

这个想法不是使用value作为它的最初目标。当label道具传递到value内部的Select时，它仍然可以正确显示。因此，你将基于innerValue并欺骗react-select。

这里有一个live example