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

可以使用React的useState和useEffect钩子函数来实现根据不同输入框的值过滤数组的功能。

首先，需要引入React和相关的钩子函数：

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

然后，创建一个组件来实现过滤数组的功能：

const FilterArray = () => {
  // 初始化数组和输入框的值
  const [data, setData] = useState([
    'apple',
    'banana',
    'cherry',
    'date',
    'elderberry',
    'fig',
  ]);
  const [filter, setFilter] = useState('');

  // 根据输入框的值过滤数组
  const filteredData = data.filter((item) =>
    item.toLowerCase().includes(filter.toLowerCase())
  );

  // 监听输入框的值变化
  useEffect(() => {
    // 这里可以添加其他逻辑，比如从后端获取数据等
  }, [filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

在上面的代码中，data是要过滤的数组，filter是用来过滤数组的输入框的值。通过使用filter函数，可以根据输入框的值对数组进行过滤，然后将过滤后的结果渲染到页面上。

最后，将FilterArray组件渲染到页面上：

ReactDOM.render(<FilterArray />, document.getElementById('root'));

这样，就可以实现根据不同输入框值过滤数组的功能了