Javascript ReactSelect-允许区分大小写的可创建选项

我正在我的ReactJS应用程序中使用React Select。我创建了一个可创建的选择类型，允许用户动态创建选项。但我有个问题

问题是： 我的选项以区分大小写的方式使用。这意味着，

user

和

user

有不同的应用

当前，当我键入例如

user

时，我也无法键入

user

我正在浏览文档，但找不到任何允许我同时使用下拉选择和创建多个区分大小写的选项的内容

以下是我的选择：

                    <CustomSelect
                      id={id}
                      type={Type.CREATABLE_SELECT}
                      options={convertRegexDataToSelect(value)}
                      onChangeCallback={values => {
                        setFieldValue(name, convertSelectToRegexData(values));
                        setFieldTouched(name, true);
                      }}
                    />

{
setFieldValue（名称、convertSelectToRegexData（值））；
setFieldTouched（名称，true）；
}}
/>

关于如何实现此功能有何想法

---

CodeSandbox中的一个工作示例：

解决方案由于用户反馈而更新：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import CreatableSelect from "react-select/creatable";
import { createFilter } from "react-select";
import { colourOptions } from "./colourOptions.js";

export default class CreatableMulti extends Component {
  handleChange = (newValue, actionMeta) => {
    console.group("Value Changed");
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  handleIsValidNewOption = (inputValue, selectValue, selectOptions) => {
    console.log(inputValue, selectOptions);
    // Check for the same value --> ASD === ASD ?
    const exactValueExists = selectOptions.find(el => el.value === inputValue);
    // Check if the value has a valid length.
    // Without this, it will show create option for empty values.
    const valueIsNotEmpty = inputValue.trim().length;
    // If true show create option.
    return !exactValueExists && valueIsNotEmpty;
  };

  render() {
    return (
      <CreatableSelect
        isMulti={true}
        onChange={this.handleChange}
        options={colourOptions}
        filterOption={createFilter({ ignoreCase: false })}
        isValidNewOption={this.handleIsValidNewOption}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<CreatableMulti />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“反应选择/可创建”导入可创建选择；
从“反应选择”导入{createFilter}；
从“/colorOptions.js”导入{colorOptions}；
导出默认类CreatableMulti-extends组件{
handleChange=（newValue，actionMeta）=>{
控制台。集团（“价值变更”）；
console.log（newValue）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
handleIsValidNewOption=（inputValue、selectValue、selectOptions）=>{
console.log（输入值，选择选项）；
//检查是否存在相同的值-->ASD===ASD？
const exactValueExists=selectOptions.find（el=>el.value==inputValue）；
//检查该值是否具有有效长度。
//如果没有此选项，它将显示空值的创建选项。
const valueIsNotEmpty=inputValue.trim（）.length；
//如果为true，则显示创建选项。
return！exactValueExists&&valueIsNotEmpty；
};
render（）{
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

自：.

解决方案因用户反馈而更新：

import React, { Component } from "react";
import ReactDOM from "react-dom";

import CreatableSelect from "react-select/creatable";
import { createFilter } from "react-select";
import { colourOptions } from "./colourOptions.js";

export default class CreatableMulti extends Component {
  handleChange = (newValue, actionMeta) => {
    console.group("Value Changed");
    console.log(newValue);
    console.log(`action: ${actionMeta.action}`);
    console.groupEnd();
  };

  handleIsValidNewOption = (inputValue, selectValue, selectOptions) => {
    console.log(inputValue, selectOptions);
    // Check for the same value --> ASD === ASD ?
    const exactValueExists = selectOptions.find(el => el.value === inputValue);
    // Check if the value has a valid length.
    // Without this, it will show create option for empty values.
    const valueIsNotEmpty = inputValue.trim().length;
    // If true show create option.
    return !exactValueExists && valueIsNotEmpty;
  };

  render() {
    return (
      <CreatableSelect
        isMulti={true}
        onChange={this.handleChange}
        options={colourOptions}
        filterOption={createFilter({ ignoreCase: false })}
        isValidNewOption={this.handleIsValidNewOption}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<CreatableMulti />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“反应选择/可创建”导入可创建选择；
从“反应选择”导入{createFilter}；
从“/colorOptions.js”导入{colorOptions}；
导出默认类CreatableMulti-extends组件{
handleChange=（newValue，actionMeta）=>{
控制台。集团（“价值变更”）；
console.log（newValue）；
log（`action:${actionMeta.action}`）；
console.groupEnd（）；
};
handleIsValidNewOption=（inputValue、selectValue、selectOptions）=>{
console.log（输入值，选择选项）；
//检查是否存在相同的值-->ASD===ASD？
const exactValueExists=selectOptions.find（el=>el.value==inputValue）；
//检查该值是否具有有效长度。
//如果没有此选项，它将显示空值的创建选项。
const valueIsNotEmpty=inputValue.trim（）.length；
//如果为true，则显示创建选项。
return！exactValueExists&&valueIsNotEmpty；
};
render（）{
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

从：。

我[几乎]明白这个问题，但不是完全明白，你能提供一个简单的例子吗？是的，我能做到。在这里的MultiSelect示例中键入更快的路由：

https://react-select.com/creatable

。同时我将创建一个沙盒。按照你的要求添加了一个小的代码沙盒。我[几乎]明白问题所在，但不是完全明白，你能提供一个简单的例子吗？是的，我可以做到。在这里的MultiSelect示例中键入更快的路由：

https://react-select.com/creatable

。同时，我将创建一个沙盒。根据您的要求添加了一个小的代码沙盒。您是说上面的内容允许您同时创建

one

和

one

作为选项吗？这是为了过滤现有选项，这是我认为您正在寻找的，我没有在创建新选项时检查这一点，我会尽快做的。@DimitrisEfst，旧答案提供了一个以区分大小写的方式筛选值的解决方案，我做了一个更新，以便您可以创建与筛选值相同的选项

ASD

ASD

ASD

ASD

现在可以创建为不同的值。请检查更新的。您是说上面的内容允许您同时创建

one

和

one

作为选项吗？这是用于筛选现有选项，这是我认为您正在寻找的，我没有检查是否创建新选项，我会尽快执行。@DimitrisEfst，旧的答案提供了一个以区分大小写的方式筛选值的解决方案，我做了一个更新，以便您可以创建与筛选值相同的选项

ASD

ASD

ASD

ASD

现在可以创建为不同的值。请检查更新的。