反应选择可创建的“无选项”而不是“创建”

Question

我正在尝试使用 react-select 创建一个 select 元素，并为此使用 Createable 组件。

在我当前的实现中，它不会在输入时提示用户输入“创建”选项，如documentation 所示 它将显示默认的“无选项”。

我也在使用redux-form 库，但我认为问题不在于那里。

到目前为止，这是我的代码：

import Select from "react-select/creatable";
import React from "react";

const customFilter = (option, searchText) => {
  return option.data.searchfield.toLowerCase().includes(searchText.toLowerCase());
};

export default (props) => {
  const { input, options, placeholder } = props;

  const renderValue = (value) => {
    const val =
      value === "" ? null : options.find((obj) => obj.value === input.value);
    return val || "";
  };

  return (
    <Select
      value={renderValue(input.value)}
      name={input.name}
      onFocus={() => input.onFocus(input.value)}
      onChange={(value) => input.onChange(value.value)}
      onBlur={() => input.onBlur(input.value)}
      options={options}
      isRtl={true}
      placeholder={placeholder}
      filterOption={customFilter}
    />
  );
};

编辑：

我还尝试从文档中导入 makeCreatableSelect ，但没有帮助：

    import Creatable, { makeCreatableSelect } from 'react-select/creatable';
<Creatable 
  //here goes props
/>

Answer 1

我认为您的问题来自您的自定义过滤器实现

这有点棘手，因为从文档中看，没有实现自定义过滤器的 CreatableSelect 示例。

要解决这个问题，您的自定义过滤器必须重新运行 "undefined" 以便“告诉”<CreatableSelect /> 组件没有这样的选项。

所以这是实现这一目标的一种选择：

       const customFilter = (option, searchText) => {
          return option.data.searchfield !== undefined ? option.data.searchfield.toLowerCase().includes(searchText.toLowerCase())
: "undefined"
        };

这样你的 CreatableSelect 就会知道是否找到了值

我在您的代码中注意到的另一个问题是您的 renderValue 方法在找不到匹配选项时将返回一个空字符串...不好：如果您希望用户创建选项，您必须呈现它何时创建...不是空字符串。

所以用类似的东西替换它：

    const renderValue = (value) => {
      const val = value === "" ? 
                  null : 
                  options.find((obj) => obj.value === input.value);
      return val || {value : value, label: value};
  };

这将创建您的新选项。当然你也可以根据自己的逻辑来改变标签。

Answer 2

根据文档：here 你必须导入这个：

import Creatable, { makeCreatableSelect } from 'react-select/creatable';
<Creatable 
  //here goes props
/>

props 可以参考这个：here 并包含所需的道具。

另外，请参考此示例代码：CodePen。

或

import Select from 'react-select';

查看此示例代码：CodePen