使用react写一个多个输入框不同字段下过滤数组的函数如果清空一个输入框data怎么处理

在React中，你可以使用useState来管理输入框的值，并使用useEffect监听输入框的变化。当清空一个输入框时，你可以将对应字段的值设置为一个特定的标识，例如null或者空字符串，并在过滤数组时，判断该字段是否为特定标识来决定是否过滤。

下面是一个示例代码：

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

const App = () => {
  const [data, setData] = useState([
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 },
    { name: 'Bob', age: 35 },
  ]);

  const [nameFilter, setNameFilter] = useState('');
  const [ageFilter, setAgeFilter] = useState('');

  useEffect(() => {
    const filteredData = data.filter(item => {
      if (nameFilter !== '' && item.name.indexOf(nameFilter) === -1) {
        return false;
      }

      if (ageFilter !== '' && item.age !== parseInt(ageFilter)) {
        return false;
      }

      return true;
    });

    // 过滤后的数据
    console.log(filteredData);
  }, [data, nameFilter, ageFilter]);

  const handleNameChange = e => {
    setNameFilter(e.target.value);
  };

  const handleAgeChange = e => {
    setAgeFilter(e.target.value);
  };

  return (
    <div>
      <input type="text" value={nameFilter} onChange={handleNameChange} placeholder="Name" />
      <input type="text" value={ageFilter} onChange={handleAgeChange} placeholder="Age" />
    </div>
  );
};

export default App;

在上述示例中，我们使用了两个输入框来过滤名字和年龄。当输入框中的值发生变化时，对应的过滤条件会更新，并通过useEffect监听这些条件的变化。当任意一个输入框被清空时，对应的过滤条件会被设置为空字符串，即''。在过滤数组时，通过判断过滤条件是否为空字符串来决定是否进行过滤。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的过滤逻辑和数据结构