从onClick设置为数据输入react的筛选状态

import React, { useState } from 'react';

const FilterComponent = () => {
  const [filter, setFilter] = useState(''); // 定义筛选条件的状态
  const [filteredData, setFilteredData] = useState([]); // 定义筛选结果的状态

  const data = ['Apple', 'Banana', 'Orange', 'Mango']; // 需要筛选的数据

  const handleFilter = (value) => {
    setFilter(value); // 更新筛选条件的状态

    // 根据筛选条件对数据进行筛选
    const filtered = data.filter(item => item.toLowerCase().includes(value.toLowerCase()));
    setFilteredData(filtered); // 更新筛选结果的状态
  };

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

export default FilterComponent;