React中多按钮onClick事件处理：实现单个按钮激活状态

你现在的问题是用了单个布尔状态（比如isActive）来控制所有按钮的激活样式，导致点击时这个状态一切换，所有按钮都会同步变成激活状态。正确的做法是用状态存储当前选中的按钮具体值，而不是布尔值。

具体实现步骤（以React为例） #

1. 定义状态存储选中的按钮标识
   用状态变量记录当前点击的按钮名称，初始可以设为空或者默认选中的按钮：

   const [activeBtn, setActiveBtn] = useState(''); // 要默认选第一个就写buttonNames[0]
   

2. 渲染按钮时做针对性判断
   遍历按钮数组时，每个按钮对比自身名称和activeBtn，相等就加激活样式类：

   const buttonNames = ['全部', '已完成', '待处理'];
   
   return (
     <div className="filter-buttons">
       {buttonNames.map(name => (
         <button
           key={name}
           // 核心：只有当前按钮名称等于activeBtn时，才加active类
           className={`filter-btn ${activeBtn === name ? 'active' : ''}`}
           onClick={() => {
             yourFilterFunction(name); // 执行你的过滤逻辑
             setActiveBtn(name); // 更新选中的按钮
           }}
         >
           {name}
         </button>
       ))}
     </div>
   );
   

3. 添加激活样式
   给激活状态的按钮加差异化样式，比如：

   .filter-btn.active {
     background: #2563eb;
     color: white;
     border-color: #2563eb;
   }
   

为什么之前会全激活？ #

如果之前你用的是类似const [isActive, setIsActive] = useState(false)的布尔状态，点击按钮时setIsActive(true)会让所有按钮的激活判断条件都成立，自然所有按钮都变成激活状态。而用具体的按钮值来对比，每个按钮只判断自己是否是当前选中的那个，就能实现仅点击的按钮高亮。

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