React-select isMulti 选择所有过滤选项 [英] React-select isMulti select all filtered options

问题描述

我需要在我的多选中添加全选"选项.如果至少有 1 个过滤选项，则应显示它.点击全选"，然后只添加过滤选项(不一定是所有选项)到已选择的选项.

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

单击全选"选项会将所有选项添加到所选选项中.

2. 输入包含自定义"，所以只剩下一个选项:

单击全选"选项将仅将该选项添加到所选选项中.

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

解决方案

我会使用 filterOption、InputChange 和 onChange 道具的组合:

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

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

onChange = (opt, { option }) =>{让 newOpts = 选择；让字符串 = this.state.searchField;if (option && option.value === "all") {让过滤选项 = 克隆(选项)；过滤选项 = 过滤选项.过滤器(过滤选项 =>isInducingString(string,filteredOption) &&!newOpts.includes(filteredOption));字符串 = 空；newOpts = newOpts.concat(filteredOptions).filter(newOpt => newOpt.value !== "all");}this.setState({搜索字段:字符串，值:newOpts});};onInputChange = (string, { action }) =>{如果(动作 ===输入变化"){this.setState({搜索字段:字符串});}};filterOption = ({ label, value }, string) =>{if (value === "all") {返回真；} else if(字符串){返回 label.includes(string) ||value.toString().includes(string);} 别的 {返回真；}};

<块引用>

重要说明，在我的示例中，我使用 lodash

中的 clone

在 onChange 中使用的 isInducingString 函数下方.

function isInducingString(string, option) {让结果=假；如果 (!string ||option.label.toString().includes(string) ||option.value.toString().includes(string)){结果=真；}返回结果；}

这是一个现场示例.

I need to add "Select All" option in my multi-select. It should be displayed if there is at least 1 filtered option. Click on "Select All" should then add only filtered options (not all options necessarily) to already selected options.

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

Clicking on Select All option would then add all options to selected options.

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

Clicking on Select All option would then add only that one option to selected options.

It was easy to add "Select all" option that adds all initial options, but that isn't the solution to my problem. I managed to partially solve my problem by manually filtering options and storing them filtered in component's state, but I hope there is a simpler solution.

解决方案

I would use a combination of filterOption, InputChange and onChange props:

• In InputChangeyou will catch the inputValue every time the user changes it and store it into the state. This value will be reused in onChange.
• You need to change the initial filterOption to display your Select all all the time. Original logic is if inputValue is null returns true else returns true is inputValue is included in option label or value. Before doing this logic, we had an other condition where if option value corresponds to your Select all option then returns true right away.
• In onChange; by default the returned options are those received. Then if an option has been selected (as it's multiple it could be removed) and this option is Select all, your returned value should be a copy of all the options and filter them by the inputValue.

Maybe there's a simplest way to do it but I think this one it pretty effective:

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

Below the isIncludingString function used in 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 live example.

这篇关于React-select isMulti 选择所有过滤选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！