Question

我正在使用react-select＆＃39; Creatable进行下拉菜单并允许用户在列表中创建新项目。

这就是我所拥有的：

<Creatable
  name="form-field-name"
  value={this.props.selectWorker}
  options={this.props.selectWorkers}
  onChange={this.props.handleSelectWorker}
/>

现在用户可以创建新名称，即使它已经存在，也会创建重复项，如下所示。

我看到react-select site上有一个名为isOptionUnique的选项。

在选项集中搜索任何匹配选项。这个功能可防止创建重复选项。默认情况下这是标签和值的基本，区分大小写的比较。预期签名：（{option：Object，options：Array，labelKey： string，valueKey：string}）：boolean

我无法使用它。我尝试了isOptionUnique=true，isOptionUnique={options:this.props.workers}，但我收到Creatable.js:173 Uncaught TypeError: isOptionUnique is not a function错误。

我无法找到isOptionUnique的示例，过滤react-select以防止重复使用Creatable的最佳方法是什么？

Answer 1

期待一个功能

<input type="text" value="some text" onblur="if(this.value == '') { this.value='some text'}" onfocus="if (this.value == 'some text') {this.value=''}">

不要忘记将其添加到您的组件实例

isOptionUnique(prop) {
  const { option, options, valueKey, labelKey } = prop;
  return !options.find(opt => option[valueKey] === opt[valueKey])
}

Answer 2

这也可以使用isValidNewOption道具来实现。

isValidNewOption = (inputValue, selectValue, selectOptions) => {
    if (
      inputValue.trim().length === 0 ||
      selectOptions.find(option => option.email === inputValue)
    ) {
      return false;
    }
    return true;
  }

您定义一个函数，该函数采用您输入的inputValue的三个参数，如果选择了值，则为selectValue，现有选项为selectOptions。该函数应根据希望新选项有效的条件返回true或false。这样可以避免添加重复项。

在上述情况下，如果没有文字或可用选项中已经存在电子邮件，我们将阻止添加新选项

如何防止用户使用React-Select Creatable创建重复值？

2 个答案: