React-Select v2逗号分隔搜索

Question

使用react-select v2可以一次搜索多个值吗？就像我可以让用户粘贴在逗号或空格分隔的值列表中，并且与这些结果匹配的项将显示在下拉列表中。

示例react-select（我们称为项目选择器）：

<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?
};

更新：我至少已经获得了项目选择器，以便我可以通过更新此onchange来输入而不丢失值

export const onEmailPickerChange = props => event => {
  // if they have selected an option and aren't just typing
  if (isArray(event)) {
    props.onChangeEmailPickerValue(event);
  }
};

Answer 1

因此，为了实现您的功能，我会使用道具filterOption。

const filterOption = ({ label, value }, string) => {
  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。