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

Question

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

这就是我所拥有的:

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

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

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

Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: ({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean

我还没能使用它。我尝试过 isOptionUnique=true、isOptionUnique={options:this.props.workers}，但我得到 Creatable.js:173 Uncaught TypeError: isOptionUnique is not函数错误。

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

Answer 1

它正在等待一个函数

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

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

isOptionUnique={this.isOptionUnique}