React Select 可创建 "no options" 而不是 "create"
React Select Creatable "no options" instead of "create"
我正在尝试使用 react-select 创建一个 select 元素,为此我使用了 Creatable 组件。
在我当前的实现中,它不会提示用户输入“创建”选项,如 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
/>
我认为您的问题出在您的自定义过滤器实现上
这有点棘手,因为文档中没有带有自定义过滤器实现的 CreatableSelect 示例。
要解决这个问题,您的自定义过滤器必须重新运行 "undefined"
以便“告诉”<CreatableSelect />
组件没有这样的选项。
所以这是实现此目的的一种选择:
const customFilter = (option, searchText) => {
return option.data.searchfield !== undefined ? option.data.searchfield.toLowerCase().includes(searchText.toLowerCase())
: "undefined"
};
这样你的 CreatableSelect 就会知道是否找到了值
我在你的代码中注意到的另一个问题是你的 renderValue
方法在找不到匹配选项时将 return 一个空字符串......不好:如果你想要用户要创建选项,您必须在创建选项时呈现它...不是空字符串。
所以用类似的东西替换它:
const renderValue = (value) => {
const val = value === "" ?
null :
options.find((obj) => obj.value === input.value);
return val || {value : value, label: value};
};
这将创建您的新选项。当然你可以根据自己的逻辑更改标签。
我正在尝试使用 react-select 创建一个 select 元素,为此我使用了 Creatable 组件。
在我当前的实现中,它不会提示用户输入“创建”选项,如 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
/>
我认为您的问题出在您的自定义过滤器实现上
这有点棘手,因为文档中没有带有自定义过滤器实现的 CreatableSelect 示例。
要解决这个问题,您的自定义过滤器必须重新运行 "undefined"
以便“告诉”<CreatableSelect />
组件没有这样的选项。
所以这是实现此目的的一种选择:
const customFilter = (option, searchText) => {
return option.data.searchfield !== undefined ? option.data.searchfield.toLowerCase().includes(searchText.toLowerCase())
: "undefined"
};
这样你的 CreatableSelect 就会知道是否找到了值
我在你的代码中注意到的另一个问题是你的 renderValue
方法在找不到匹配选项时将 return 一个空字符串......不好:如果你想要用户要创建选项,您必须在创建选项时呈现它...不是空字符串。
所以用类似的东西替换它:
const renderValue = (value) => {
const val = value === "" ?
null :
options.find((obj) => obj.value === input.value);
return val || {value : value, label: value};
};
这将创建您的新选项。当然你可以根据自己的逻辑更改标签。