多个过滤器，一个onChange函数

Question

我的结构：

excludeDir="--exclude \"*dir1/*\" --exclude \"*dir2/*\" "
aws --region=xxxxxxx s3 cp ${S3WebAssetsPath} ${contentFolderPath} --recursive ${excludeDir}

过滤器包含多个输入元素，可通过props在index.js中设置状态。 list会按照您的猜测显示元素列表。我现在想根据过滤器返回的值过滤此列表。我认为这是相当标准的，并在数百万个站点中发现。

问题是我想使输入onChange函数可重用。在Filters组件中只有一个输入，我做了以下操作（缩短了）：

index.js
--> Filters
--> {list}

我尝试了多次输入，也可用于任何输入：

<input
   value={this.state.anySearch}
   onChange={this.handleChange}
/>

handleChange = event => {
  const value = event.target.value;
  this.setState({ anySearch: value });
};

但是这不再起作用了。现在，在控制台登录时，状态一次只显示一个字母。

根据àlakayak的多个不同条件进行过滤的最佳实践是什么，如何在不将每个字母都推入数组的情况下重写handleChange函数？

Answer 1

handleChange = name => event => {
  const value = event.target.value;
  this.setState({ name: value });
};

您返回函数的想法是正确的，设置状态时只会出错

this.setState({ name: value });

将其更改为

this.setState({ [name]: value });

关于第二个问题，您可以简单地遍历数组并筛选出符合特定条件的对象，为避免不必要的开销，您可以实施一种缓存机制来跟踪用户已经完成的搜索。

类似这样的东西：

function filter(criteria) {
  if(cache[criteria]) {
    return cache[criteria];
  }

  cache[criteria] = myArray.filter(elem => elem.criteria === criteria);
  return cache[criteria];
}