React-select creatable - разрешить только одну созданную опцию - PullRequest
Новая
       12

React-select creatable - разрешить только одну созданную опцию

0 голосов
/ 09 ноября 2018

Я использую реагировать-выберите и создаемую функцию, которая позволяет вам создать новую опцию выбора - просто введите в поле выбора / ввода на пример .

Я хочу поставить отметку, которая позволяет сделать только один создаваемый параметр за один раз, следующий созданный параметр удаляет и заменяет предыдущий. На данный момент вы можете создать бесконечное количество.

Это часть, которая обрабатывает созданную опцию, поэтому я думаю, мне нужно добавить какое-то правило, чтобы разрешить только одну опцию здесь.

Любая помощь приветствуется. 

  handleCreate = input => (inputValue: any) => {
    this.setState({ isLoading: true });
    setTimeout(() => {
      const { options } = this.state;
      const newOption = createOption(inputValue);
      this.setState({
        isLoading: false,
        options: [...options, newOption],
        value: newOption
      });
      input.onChange(newOption);
    }, 1000);
  };

https://codesandbox.io/s/o49kjl09j9

1 Ответ

0 голосов
/ 09 ноября 2018

Что вы можете сделать, это сохранить индекс новой опции, проверить, сохранен ли индекс, и если это так, заменить это значение новым, например, следующим кодом: 

state = {
    value: this.props.options[0],
    options: this.props.options,
    hasCreatedOption: false
  };
  handleCreate = input => (inputValue: any) => {
    this.setState({ isLoading: true });
    setTimeout(() => {
      const { options } = this.state;
      const newOption = createOption(inputValue);
      let hasCreatedOption = false;

      if (this.state.hasCreatedOption) {
        options[this.state.hasCreatedOption] = newOption;
      } else {
        options.push(newOption);
      }
      hasCreatedOption = options.length - 1;

      this.setState({
        hasCreatedOption,
        isLoading: false,
        options: [...options],
        value: newOption
      });
      input.onChange(newOption);
    }, 1000);
  };

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

...