如何使用onClick()过滤React Bootstrap卡

import React, { useState } from 'react';
import { Card, Button } from 'react-bootstrap';

const CardFilter = () => {
  // 设置卡片数据
  const [cards, setCards] = useState([
    { id: 1, title: 'Card 1', category: 'Category A' },
    { id: 2, title: 'Card 2', category: 'Category B' },
    { id: 3, title: 'Card 3', category: 'Category A' },
    { id: 4, title: 'Card 4', category: 'Category C' },
  ]);

  // 设置过滤选项
  const [filter, setFilter] = useState('All');

  // 处理过滤按钮点击事件
  const handleFilterClick = (category) => {
    setFilter(category);
  };

  // 根据过滤选项筛选卡片
  const filteredCards = filter === 'All' ? cards : cards.filter(card => card.category === filter);

  return (
    <div>
      <div>
        <Button onClick={() => handleFilterClick('All')}>All</Button>
        <Button onClick={() => handleFilterClick('Category A')}>Category A</Button>
        <Button onClick={() => handleFilterClick('Category B')}>Category B</Button>
        <Button onClick={() => handleFilterClick('Category C')}>Category C</Button>
      </div>
      <div>
        {filteredCards.map(card => (
          <Card key={card.id}>
            <Card.Body>
              <Card.Title>{card.title}</Card.Title>
              <Card.Text>{card.category}</Card.Text>
            </Card.Body>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default CardFilter;