在按钮组数组之间反应切换活动类答案

【问题标题】：React toggle active class between button group array在按钮组数组之间反应切换活动类
【发布时间】：2022-01-09 15:58:19
【问题描述】：

我制作了一个带有类别过滤器的照片库，但我想让活动类别按钮具有active 类

我通过映射galleryData 数组来显示按钮

{
  galleryData.map((item, index) => (
    <button
      key={index}
      onClick={() => filterGalley(item.category)}
      className="filter-button"
    >
      {item.category}
    </button>
  ));
}

而 onClick 我按类别过滤画廊项目。 value 是类别类型的字符串

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

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

  console.log(value);
  setGalleryItems(filteredData);
};

如何将active 类传递给当前查看的类别？ onMount 应该是all，然后是被点击的那个。

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

为 activeCategory 定义一个状态并将其用于active 类：

const [activeCategory, setActiveCategory] = useState('all');
const filterGalley = (value) => {
    setActiveCategory(value);
    if (value === 'all') {
        setGalleryItems(galleryData);
        return;
    }

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

    console.log(value);
    setGalleryItems(filteredData);
};

并使用它：

 {galleryData.map((item, index) => (
   <button
       key={index}
       onClick={() => filterGalley(item.category)}
       className={"filter-button " + (activeCategory === item.category ? 'active' : '')}
   >
       {item.category}
   </button>
))}

【讨论】：