[英]React-Select v2 comma separated search
react-select v2有没有办法一次搜索多个值? 就像我可以让我的用户粘贴到逗号或空格分隔的值列表中,与这些结果匹配的项目将显示在下拉列表中。
示例反应选择(我们称它们为项目选择器):
<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?
};
因此,为了实现您的功能,我将使用道具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
在每个实例上执行。
现场示例可在此处获得。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.