有没有办法使用react-select v2一次搜索多个值?就像我可以让用户粘贴逗号或空格分隔值的列表,并且与这些结果匹配的项目将显示在下拉列表中。
示例 react 选择(我们称之为项目选择器):
<StyledFormItemPicker
className="emailPicker"
filterKeys={['label']}
label="email picker"
value={emailPickerValue}
onChange={value => onEmailPickerChange(value)}
items={users}
isMulti={true}
/>
onChange 代码:
// allow user to pass in comma separated list to search
export const onEmailPickerChange = props => event => {
event.persist();
// split event (value) on space or comma
// push to an array
// set that array of strings as the value and see all results?
};
最佳答案
因此,为了实现您的功能,我将使用 Prop filterOption
。
const filterOption = ({ label, value }, string) => {
if(string === "") return true;
const parsedString = string.split(/[, ]+/);
for (const string of parsedString) {
// Need to check of string is not empty after the split
if (string !== "" && (label.includes(string) || value.includes(string)))
return true;
}
return false;
};
这个想法是用空格或逗号分割输入值(在上面的示例中,我组合了这两个选项)并应用 react-select
对每个值执行的常规过滤实例。
可用的实例 here .
关于javascript - React-Select v2 逗号分隔搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58384250/