时间戳

首页 > 解决方案 > 多个过滤器，一个 onChange 函数

javascript - 多个过滤器，一个 onChange 函数

问题描述

我的结构：

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

过滤器包含多个输入元素，它们通过 props 在 index.js 中设置状态。list 如您所料，显示一个元素列表。我现在想根据过滤器返回的值过滤这个列表。相当标准，我认为并在数百万个网站上找到。

问题是我想让输入 onChange 函数可重用。在过滤器组件中只有一个输入，我有这个（缩短）：

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

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

我尝试了多个输入，也可以对任何输入重复使用：

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

onChange={this.handleChange("anySearch")}

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

根据多个不同的标准 à la kayak进行过滤的最佳做法是什么，以及如何在不将每个字母推入数组的情况下重写 handleChange 函数？

标签： javascriptreactjs

解决方案

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

推荐阅读