使用React中的复选框按钮过滤数据

import React, { useState } from 'react';

const data = [
  { id: 1, name: 'Apple', category: 'Fruit' },
  { id: 2, name: 'Banana', category: 'Fruit' },
  { id: 3, name: 'Carrot', category: 'Vegetable' },
  { id: 4, name: 'Tomato', category: 'Vegetable' },
];

const FilterableData = () => {
  const [filters, setFilters] = useState([]);

  const handleFilterChange = (event) => {
    const value = event.target.value;
    if (event.target.checked) {
      setFilters([...filters, value]);
    } else {
      setFilters(filters.filter((filter) => filter !== value));
    }
  };

  const filteredData = data.filter((item) => {
    return filters.includes(item.category);
  });

  return (
    <div>
      <h2>Filterable Data</h2>
      <div>
        <label>
          <input
            type="checkbox"
            value="Fruit"
            checked={filters.includes('Fruit')}
            onChange={handleFilterChange}
          />
          Fruit
        </label>
        <label>
          <input
            type="checkbox"
            value="Vegetable"
            checked={filters.includes('Vegetable')}
            onChange={handleFilterChange}
          />
          Vegetable
        </label>
      </div>
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FilterableData;