React按钮组切换active类：图库分类筛选按钮如何绑定激活状态

实现方案 #

步骤1：新增激活分类状态 #

你需要新增一个状态变量存储当前选中的分类，默认值设为all满足页面加载默认激活的需求：

import { useState } from 'react';

// 在组件内部声明状态
const [activeCategory, setActiveCategory] = useState('all');

步骤2：修改筛选逻辑，同步更新激活状态 #

点击按钮筛选的同时，把当前选中的分类存入状态：

const filterGalley = (value) => {
  // 新增这行更新激活分类
  setActiveCategory(value);

  if (value === "all") {
    setGalleryItems(galleryData);
    return;
  }

  const filteredData = galleryData.filter((item) => item.category === value);
  setGalleryItems(filteredData);
};

步骤3：动态绑定按钮类名 #

渲染按钮时判断当前分类是否匹配激活状态，匹配就追加active类：

{
  galleryData.map((item, index) => (
    <button
      key={index}
      onClick={() => filterGalley(item.category)}
      {/* 动态拼接类名 */}
      className={`filter-button ${item.category === activeCategory ? 'active' : ''}`}
    >
      {item.category}
    </button>
  ));
}

补充说明 #

你可以根据需求自定义active类的样式，示例样式参考：

.filter-button.active {
  background: #1677ff;
  color: #fff;
  border-color: #1677ff;
}

内容的提问来源于stack exchange，提问作者ryan