React Select - 允许区分大小写的可创建选项

Question

我在我的 ReactJS 应用程序中使用 React-Select。我创建了一个 Creatable Select 类型，它允许用户即时创建选项。但是我有一个问题。

问题：我的选项以区分大小写的方式使用。这意味着，user 和 USER 有不同的应用。

目前，当我输入 user 时，我也无法输入 USER。

我正在浏览文档，但找不到任何允许我使用下拉菜单 Select 以及创建多个 CaseSensitive 选项的东西。

这是我的 Select:

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

关于如何实现此功能有什么想法吗？

CodeSandbox 中的一个工作示例：https://codesandbox.io/s/priceless-brown-zk7e1

Answer 1

解决方案已根据用户反馈更新：

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);

从：isValidNewOption Prop.

React Select - 允许区分大小写的可创建选项

ReactSelect - Allow for Case Sensitive Creatable Options

javascript

reactjs

react-select