对React中的状态应用多个筛选器

constructor(props) {
  super(props);
  this.state = {
    filters: {
      filter1: '',
      filter2: '',
      // 可以根据需要添加更多的筛选器
    },
    filteredData: [],
  };
}

handleFilter1Change = (event) => {
  const value = event.target.value;
  this.setState((prevState) => ({
    filters: {
      ...prevState.filters,
      filter1: value,
    },
  }));
}

handleFilter2Change = (event) => {
  const value = event.target.value;
  this.setState((prevState) => ({
    filters: {
      ...prevState.filters,
      filter2: value,
    },
  }));
}

filterData = () => {
  const { filter1, filter2 } = this.state.filters;
  // 根据filter1和filter2的值对数据进行过滤
  const filteredData = // 过滤算法
  this.setState({ filteredData });
}

render() {
  const { filter1, filter2, filteredData } = this.state;
  
  return (
    <div>
      <input type="text" value={filter1} onChange={this.handleFilter1Change} />
      <input type="text" value={filter2} onChange={this.handleFilter2Change} />
      
      {/* 渲染过滤后的数据 */}
      {filteredData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}