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

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

React Bootstrap是一个基于React的UI组件库，提供了一系列易用且高度可定制的UI组件，以及各种交互功能。

要实现使用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;

上述代码中，通过useState来管理卡片数据和过滤选项的状态。handleFilterClick函数用于处理过滤按钮的点击事件，根据点击的按钮设置过滤选项。filteredCards根据过滤选项筛选出符合条件的卡片数据。最后，使用map方法遍历filteredCards数组，生成相应的Card组件。

通过上述步骤，你可以使用onClick()过滤React Bootstrap卡片。这样，在点击过滤按钮时，页面上只会显示符合过滤条件的卡片。

腾讯云相关产品：腾讯云函数（云函数是一个事件驱动的无服务器计算平台，支持多种语言，可帮助您实现服务端逻辑的编写和部署。）。

腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf

注意：以上答案为示例，实际应用中可能需要根据具体情况进行调整。