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

Question

基本上，我想使用 react-select 库并使用 isMulti 道具，但问题是在选择一个选项后，该值将被删除。正如您在下面提供的图像中看到的那样，只要我单击 "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" 在我希望保留该选项时单击它时消失。我认为它会改变我的 "options" 数组并显示没有单击选项的新数组。如果我能以某种方式在每次 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 道具被传递到 Select 内部的 value 时，它仍然会正确显示。所以你会立足于innerValue，把戏react-select。

这里是live example

Answer 2

我猜你只需要将 hideSelectedOptions={false} 添加到 <Select />。喜欢：

<Select 
  isMulti={true} 
  hideSelectedOptions={false}
  options={options}
  ...
/>

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

Is there any way I can use isMulti without it deleting choices I've already picked? In otherwords, having duplicate/repeated selected options?

javascript

reactjs

react-select