Есть ли способ использовать isMulti без удаления уже выбранных вариантов? Другими словами, иметь дублированные / повторные выбранные опции? - PullRequest
Новая
       3

Есть ли способ использовать isMulti без удаления уже выбранных вариантов? Другими словами, иметь дублированные / повторные выбранные опции?

1 голос
/ 09 апреля 2019

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

https://i.imgur.com/1g7nI2z.png https://i.imgur.com/djNjjvL.png

1 Ответ

0 голосов
/ 10 апреля 2019

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

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.

Здесь живой пример

...