是否可以在 react-select 中同时选择和创建相同的值？答案

【问题标题】：Is it possible to both select and create the same value in react-select?是否可以在 react-select 中同时选择和创建相同的值？
【发布时间】：2020-12-10 21:19:10
【问题描述】：

我正在尝试创建一个多重 Creatable，其中用户既可以选择预设值，也可以自己“创建”相同的值，两者都在同一个交互中。比如我的渲染外观

import CreatableSelect from 'react-select/creatable';
function test(){
    render(
        <CreatableSelect
            isMulti
            onChange={this.handleChange}
            options = [{ value: 'Blue', label: 'Blue'}, { value: 'Red', label: 'Red'}]
          />
        );)
}

我想让用户同时选择“蓝色”作为选项，并同时创建值“蓝色”。即，我想将handleChange的输出为：

[{ value: 'Blue', label: 'Blue'}, { value: 'Blue', label: 'Blue', __isNew__: true}]

这对我来说不是 UI 问题，因为我会根据它是从列表中创建还是从列表中选择来对选定的值进行不同的着色。是否可以？我尝试将isValidNewOption={() => true} 作为道具，但没有奏效。

【问题讨论】：

这很模糊。有关您如何准确处理这些数据的更多详细信息将在这里有所帮助。用户如何同时选择和定义？你的意思是像一个可编辑的下拉菜单/列表吗？您如何使用这些数据？代码是什么样的？
我编辑了我的问题。只是为了确保-我专门询问'react-select'的CreatableSelect。
我很困惑。好奇你为什么会想要那个。据我所知，react-select 的行为会过滤现有选项以查找“蓝色”，从而阻止它也被创建。您能否详细说明为什么这在 UI 中很重要的确切用例？
你的意思是，如果当前选项中不存在新价值，用户可以创造新价值吗？
@Squiggs。我承认，我的用例可能有点小众。我让我的（非常有限的一组）用户生成某种“ID”。此“ID”由现有值的封闭列表构成，与我系统中的另一个概念相关，并且来自自定义用户添加。因此，一个示例可能是：“Blue”-Blue-Red-“hello”，其中“Blue”和“hello”是用户添加，Blue 和 Red 预先存在。 “蓝色”和“蓝色”的含义对我来说是不同的，我的用户很清楚这一点。

标签： javascript reactjs react-select

【解决方案1】：

找到了一种解决方法，如果有更好的方法，我不喜欢使用它：

我可以添加一个特殊字符（或字符串）作为所有值的前缀（保留原样的标签）。例如-转换[{ value: 'Blue', label: 'Blue'}, { value: 'Red', label: 'Red'}] 进入[{ value: '$Blue', label: 'Blue'}, { value: '$Red', label: 'Red'}]

现在，它让我创建一个新值“Blue”，并选择值“$Blue”。由于“$Blue”的标签仍然是“Blue”，用户不会注意到差异。最后，我需要删除 onChange 函数中的前缀。

这不是一个非常优雅的解决方案，但总比没有好。

【讨论】：