使用react写一个多个输入框不同字段下过滤数组的函数

可以使用React的useState和useEffect钩子来实现多个输入框不同字段下过滤数组的功能。下面是一个示例代码：

import React, { useState, useEffect } from 'react';

const FilterArray = ({ data }) => {
  const [filter, setFilter] = useState({});
  const [filteredData, setFilteredData] = useState(data);

  useEffect(() => {
    const filtered = data.filter(item => {
      for (let key in filter) {
        if (item[key] !== filter[key]) {
          return false;
        }
      }
      return true;
    });
    setFilteredData(filtered);
  }, [data, filter]);

  const handleInputChange = (e, field) => {
    const value = e.target.value;
    setFilter(prevFilter => ({
      ...prevFilter,
      [field]: value
    }));
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Filter by field 1"
        onChange={e => handleInputChange(e, 'field1')}
      />
      <input
        type="text"
        placeholder="Filter by field 2"
        onChange={e => handleInputChange(e, 'field2')}
      />
      <input
        type="text"
        placeholder="Filter by field 3"
        onChange={e => handleInputChange(e, 'field3')}
      />

      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilterArray;

在上面的代码中，我们定义了一个FilterArray组件接受一个data数组作为props。filter和filteredData分别是用于存储过滤条件和过滤后的结果的state。

在useEffect钩子中，我们监听data和filter的变化，并根据过滤条件对data数组进行过滤，将过滤后的结果存储在filteredData中。

在输入框的onChange事件处理函数中，我们更新对应字段的过滤条件。每当输入框的值发生变化时，会触发handleInputChange函数，将对应字段的值更新到filter中。

最后，我们将过滤后的结果渲染在一个ul元素中。每条过滤后的数据都会渲染为一个li元素