5

我正在使用 react-select'Creatable进行下拉并允许用户在列表中创建新项目。

这就是我所拥有的：

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

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

重复名称

我看到有一个名为react-select siteisOptionUnique的选项。

在选项集中搜索任何匹配的选项。此功能可防止创建重复选项。默认情况下，这是标签和值的基本、区分大小写的比较。预期签名：({ 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？

4

2 回答 2

2

它期待一个功能

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

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

isOptionUnique={this.isOptionUnique}
于 2017-07-25T00:21:05.480 回答
2

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

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

您定义一个函数，该函数采用您输入的 inputValue 的三个参数，如果选择了一个值，则为 selectValue，现有选项为selectOptions. 该函数应返回真或假，具体取决于您希望新选项有效的条件。这将防止添加重复项。

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

于 2019-01-22T15:40:30.950 回答