React-select creatable - 只允许一个创建的选项

Question

我正在使用react-select 和允许您创建新选择选项的可创建功能 - 只需在example 上输入选择/输入字段。

我想检查一次只允许一个可创建的选项，下一个创建的选项将删除并取代前一个。目前你可以创造无限量。

这是处理创建选项的部分，所以我想我需要添加某种规则来只允许一个选项。

任何帮助表示赞赏。

  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

Answer 1

你可以做的是存储新选项的索引，检查是否存储了一个索引，如果有，用新的替换这个值，如下代码：

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);
  };

Here a live example.