ReactJS多重过滤

import React, { useState } from 'react';

const data = [
  { id: 1, name: 'Apple', category: 'Fruit', price: 1.5 },
  { id: 2, name: 'Banana', category: 'Fruit', price: 0.5 },
  { id: 3, name: 'Carrot', category: 'Vegetable', price: 0.75 },
  // ...更多数据
];

function MultiFilterComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('');
  const [minPrice, setMinPrice] = useState('');
  const [maxPrice, setMaxPrice] = useState('');

  const filteredData = data.filter(item => {
    const nameMatch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
    const categoryMatch = selectedCategory ? item.category === selectedCategory : true;
    const priceMatch = item.price >= (minPrice || 0) && item.price <= (maxPrice || Infinity);
    return nameMatch && categoryMatch && priceMatch;
  });

  return (
    <div>
      <input type="text" placeholder="Search by name" onChange={e => setSearchTerm(e.target.value)} />
      <select onChange={e => setSelectedCategory(e.target.value)}>
        <option value="">All Categories</option>
        <option value="Fruit">Fruit</option>
        <option value="Vegetable">Vegetable</option>
      </select>
      <input type="number" placeholder="Min Price" onChange={e => setMinPrice(e.target.value)} />
      <input type="number" placeholder="Max Price" onChange={e => setMaxPrice(e.target.value)} />

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

export default MultiFilterComponent;