REACT filterCondition 多个过滤条件

在 React 中，可以通过多种方式实现多个过滤条件，以下是其中一种方法。

假设你有一个包含多个对象的数组，每个对象都有一些属性。你想要在 UI 中提供多个过滤条件，例如按名称、按类别和按价格过滤。你可以使用 state 来保存每个过滤条件的值，并使用该值来过滤数组。

首先，你需要在组件中设置 state，用于保存每个过滤条件的值。例如：

constructor(props) {
  super(props);
  this.state = {
    nameFilter: '',
    categoryFilter: '',
    priceFilter: ''
  };
}

然后，为 UI 添加输入框或下拉列表，以允许用户设置过滤条件。例如：

<input type="text" value={this.state.nameFilter} onChange={e => this.setState({ nameFilter: e.target.value })} />
<select value={this.state.categoryFilter} onChange={e => this.setState({ categoryFilter: e.target.value })}>
  <option value="">All</option>
  <option value="category1">Category 1</option>
  <option value="category2">Category 2</option>
</select>
<input type="number" value={this.state.priceFilter} onChange={e => this.setState({ priceFilter: e.target.value })} />

注意，这里使用了不同的输入类型（文本框、下拉列表和数字输入框），具体取决于过滤条件的类型。

最后，在渲染函数中，使用 state 中的值来过滤数组。例如：

render() {
  const filteredItems = this.props.items.filter(item =>
    item.name.includes(this.state.nameFilter) &&
    (this.state.categoryFilter === '' || item.category === this.state.categoryFilter) &&
    (this.state.priceFilter === '' || item.price <= parseFloat(this.state.priceFilter))
  );

  // 渲染过滤后的数组
}

在这个例子中，我们使用了 Array.filter() 方法来过滤数组。我们检查每个对象是否满足所有过滤条件，并仅返回满足条件的对象。请注意，我们使用了 parseFloat() 方法将价格过滤条件转换为数字。