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

以下是使用React编写不同字段下过滤数组的函数的示例：

import React, { useState } from "react";

const FilterArray = () => {
  const [data, setData] = useState([
    { id: 1, name: "John", age: 25 },
    { id: 2, name: "Jane", age: 30 },
    { id: 3, name: "Bob", age: 28 }
  ]);
  const [filteredData, setFilteredData] = useState(data);
  const [filterField, setFilterField] = useState("");

  const handleFilterChange = (event) => {
    const value = event.target.value;
    setFilterField(value);

    // 根据选择的字段过滤数组
    const filteredArray = data.filter((item) =>
      item.name.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredData(filteredArray);
  };

  return (
    <div>
      <input
        type="text"
        value={filterField}
        onChange={handleFilterChange}
        placeholder="Filter by name"
      />

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

export default FilterArray;

在这个示例中，我们定义了一个名为FilterArray的React函数组件。该组件使用useState钩子来管理状态。

初始状态下，data数组包含了一些对象，每个对象都有id，name和age字段。filteredData状态用于存储根据过滤条件筛选后的数组，初始值与data相同。filterField状态用于存储输入框的值，初始为空字符串。

handleFilterChange函数用于处理输入框的变化事件。它首先获取输入框的值，并将其存储在filterField状态中。然后，它使用filter方法对data数组进行过滤，只保留包含输入值的name字段的对象。最后，它将过滤后的数组存储在filteredData状态中。

在组件的JSX部分，我们渲染了一个输入框和一个无序列表。输入框的值绑定到filterField状态，当输入框的值发生变化时，会触发handleFilterChange函数。无序列表根据filteredData数组进行渲染，显示每个对象的name和age字段。

这样，当用户在输入框中输入文本时，会根据name字段过滤数组，并将过滤后的结果显示在页面上