React中如何修改数组内被onClick触发的单个按钮状态？

你遇到的核心问题是用了单个布尔值来控制所有按钮的激活状态——比如你可能写了const [isActive, setIsActive] = useState(false)，点击时直接把isActive设为true/false，自然所有按钮都会跟着切换状态。

要实现单个按钮独立切换，我们需要给每个按钮单独维护激活状态，下面是具体的解决方案：

步骤1：用对象存储每个按钮的激活状态 #

我们可以用一个对象来记录每个筛选选项的激活状态，键用选项的唯一标识（比如数据里的id），值是布尔值表示是否激活。

假设你的筛选数据数组是这样的：

const filterOptions = [
  { id: 1, labelKey: "filter.label1" },
  { id: 2, labelKey: "filter.label2" },
  { id: 3, labelKey: "filter.label3" }
];

初始化状态：

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl'; // 假设你用的是react-intl

const FilterPage = () => {
  // 用对象存储每个选项的激活状态，初始为空
  const [activeFilters, setActiveFilters] = useState({});

步骤2：编写点击事件处理函数 #

点击按钮时，切换对应选项的激活状态，这里要基于之前的状态更新（用prevState确保拿到最新状态）：

const handleFilterClick = (filterId) => {
    setActiveFilters(prevState => ({
      ...prevState, // 保留其他选项的状态
      [filterId]: !prevState[filterId] // 切换当前选项的激活状态
    }));
  };

如果是单选需求（只能选一个筛选条件），处理函数改成这样：

// 单选版本的处理函数
  const handleFilterClick = (filterId) => {
    const newActiveState = {};
    // 遍历所有选项，只把当前点击的设为true，其余为false
    filterOptions.forEach(opt => {
      newActiveState[opt.id] = opt.id === filterId;
    });
    setActiveFilters(newActiveState);
  };

步骤3：渲染按钮列表 #

渲染时根据activeFilters里的状态给按钮添加激活类：

return (
    <div className="filter-container">
      <div className="filter-buttons">
        {filterOptions.map(filter => (
          <button
            key={filter.id} // 必须用唯一值当key，别用数组索引
            className={`filter-btn ${activeFilters[filter.id] ? 'active' : ''}`}
            onClick={() => handleFilterClick(filter.id)}
          >
            <FormattedMessage id={filter.labelKey} />
          </button>
        ))}
      </div>
      <Link to="/next-page" className="submit-link">
        <FormattedMessage id="filter.goToNext" />
      </Link>
    </div>
  );
};

export default FilterPage;

补充说明 #

• 激活样式需要自己定义，比如给.active类加背景色、边框样式：

.filter-btn.active {
  background-color: #2196f3;
  color: white;
  border-color: #2196f3;
}

• 如果你的数据里没有id，也可以用唯一的label作为对象的键，但优先推荐用独立的id字段，避免文案重复导致状态混乱。
• 用prevState更新状态是因为React的状态更新是异步的，这样能确保我们基于最新的状态来修改，避免出现错误。

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