Javascript “反应选择可创建”；“没有选择”；而不是",；创建；

我试图用react select创建一个select元素，并使用可创建组件来实现这一点

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

我也在使用

redux表单

库，但我不认为问题来自于此

以下是我目前的代码：

从“反应选择/可创建”导入选择；
从“React”导入React；
const customFilter=（选项，搜索文本）=>{
return option.data.searchfield.toLowerCase（）.includes（searchText.toLowerCase（））；
};
导出默认值（道具）=>{
const{input，options，placeholder}=props；
常量renderValue=（值）=>{
康斯特瓦尔=
value==“”？null:options.find（（obj）=>obj.value===input.value）；
返回值| |“”；
};
返回(
input.onFocus（input.value）}
onChange={（value）=>input.onChange（value.value）}
onBlur={（）=>input.onBlur（input.value）}
选项={options}
isRtl={true}
占位符={占位符}
filterOption={customFilter}
/>
);
};

编辑：

我还尝试从文档中导入

makeCreatableSelect

，但没有帮助：

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

import createable，{makecreateableselect}来自'react select/createable'；

根据文档： 您必须导入以下内容：

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

---

检查以下示例代码：

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

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

要解决此问题，您的自定义筛选器必须重新运行

“undefined”

，以便“告诉”组件没有此选项

因此，有一种方法可以实现这一点：

constcustomfilter=（选项，searchText）=>{
return option.data.searchfield！==未定义？option.data.searchfield.toLowerCase（）.includes（searchText.toLowerCase（））
：“未定义”
};

这样，您的CreatableSelect将知道是否找到了该值

---

我在代码中注意到的另一个问题是，

renderValue

方法在找不到匹配选项时将返回空字符串…不好：如果希望用户创建选项，则必须在创建选项时渲染它…而不是空字符串

因此，用类似以下内容来代替：

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

---

这将创建您的新选项。当然，您可以根据自己的逻辑更改标签。

我也试过了……但没有用。他们也没有展示如何实现这个

makecreateableselect

功能，而是导入这个：

import Select from“react Select”

&检查这个，它可能会有帮助：嗯，让我检查一下这个没有帮助……对不起，好的，你能为你的项目共享你的代码笔吗？我不明白你答案的第二部分，我的rendervalue函数有什么问题？

rendervalue

方法将只返回预定义选项列表中的值。如果它没有找到它，它将返回一个空字符串，这不是你想要的，因为你想创建新的选项。是的，在一些镜头之后，我理解了这一点，现在它工作得很好：非常感谢你的帮助！！

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