javascript - React-select isMulti 选择所有过滤选项

Question

我需要在多选中添加“全选”选项。如果至少有 1 个过滤选项，则应显示它。单击“全选”后，应该仅将过滤后的选项(不一定是所有选项)添加到已选择的选项。

1. 输入为空，因此所有选项都被“过滤”:

单击“全选”选项会将所有选项添加到所选选项中。

输入包含“custom”，因此只剩下一个选项::

单击“全选”选项将仅将该一个选项添加到所选选项中。

很容易添加“全选”选项来添加所有初始选项，但这并不是我的问题的解决方案。我通过手动过滤选项并将它们存储在组件的状态中，成功地部分解决了我的问题，但我希望有一个更简单的解决方案。

Answer 1

我将使用 filterOption、InputChange 和 onChange 属性的组合:

• 在 InputChange 中，每次用户更改时，您都会捕获 inputValue 并将其存储到状态中。该值将在 onChange 中重用。
• 您需要更改初始的filterOption 以始终显示您的全选。原始逻辑是 if inputValue is null returns true else returns true is inputValue is包含在选项标签或值中。在执行此逻辑之前，我们还有一个条件，即如果选项值对应于您的全选选项，则立即返回true。
• 在onChange中；默认情况下，返回的选项是收到的选项。然后，如果选择了一个选项(因为它是多个选项，因此可以将其删除)并且该选项是全选，则返回的值应该是所有选项的副本，并通过inputValue过滤它们。

也许有一种最简单的方法，但我认为这个方法非常有效:

onChange = (opt, { option }) => {
  let newOpts = opt;
  let string = this.state.searchField;

  if (option && option.value === "all") {
    let filteredOptions = clone(options);

    filteredOptions = filteredOptions.filter(
      filteredOption =>
        isIncludingString(string, filteredOption) &&
        !newOpts.includes(filteredOption)
    );

    string = null;
    newOpts = newOpts
      .concat(filteredOptions)
      .filter(newOpt => newOpt.value !== "all");
  }
  this.setState({
    searchField: string,
    values: newOpts
  });
};

onInputChange = (string, { action }) => {
  if (action === "input-change") {
    this.setState({
      searchField: string
    });
  }
};  

filterOption = ({ label, value }, string) => {
  if (value === "all") {
    return true;
  } else if (string) {
    return label.includes(string) || value.toString().includes(string);
  } else {
    return true;
  }
};

Important note, in my example I use clone from lodash

在 onChange 中使用的 isInclusionString 函数下方。

function isIncludingString(string, option) {
  let result = false;
  if (
    !string ||
    option.label.toString().includes(string) ||
    option.value.toString().includes(string)
  ) {
    result = true;
  }
  return result;
}

这里是live example .