Блог

В принципе, я хочу использовать библиотеку 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» исчезает при нажатии, когда я хочу, чтобы эта опция оставалась. Я думаю, что это изменяет мой массив «options» и отображает новый, у которого нет выбранной опции. Если я смогу каким-то образом продолжать передавать ему эти исходные значения после каждого onChange, это было бы здорово. Я не уверен, как копаться в библиотеке о том, как это сделать, или если это вообще возможно.
https://www.npmjs.com/package/react-select

Вот как я бы это сделал:

 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 .

Вот живой пример

Я думаю, все, что вам нужно, это добавить hideSelectedOptions={false} в <Select /> . Нравится:

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