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

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

1. Input is empty, so all options are "filtered":

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

2. Input contains "custom", so only one option remains::

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

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

我会结合使用filterOption, InputChange and onChange props:

• In InputChange你会抓住inputValue每次用户更改它并将其存储到状态中时。该值将被重用在onChange.
• 您需要更改初始值filterOption显示您的Select all每时每刻。原来的逻辑是如果inputValue is null回报true否则返回true is inputValue包含在选项标签或值中。在执行此逻辑之前，我们还有另一个条件，其中 if 选项值对应于您的Select all然后选项返回true马上。
• In onChange;默认情况下，返回的选项是收到的选项。然后，如果选择了一个选项（因为它是多个，可以删除）并且该选项是Select all，您的返回值应该是所有选项的副本并按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;
  }
};

重要提示，在我的示例中我使用clone from lodash

以下isIncludingString函数用于onChange.

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

Here a 活生生的例子 https://codesandbox.io/s/stackoverflow-answer-57698868-w706k.