onClick事件致所有按钮状态从true变false，需仅点击按钮保持true

问题根源 #

你之前的代码应该是用了单个布尔值状态控制所有按钮，导致点击任意按钮修改状态时，所有按钮的状态同步变化（全部从true变为false）。要实现仅被点击的按钮保持true，需要为每个按钮设置独立的状态标识。

解决方案1：单选模式（每次仅一个按钮激活） #

这种模式下，点击按钮后只有该按钮处于true状态，其余按钮自动变为false：

import { useState } from 'react';

function ButtonGroup() {
  // 用变量存储当前激活的按钮ID，初始为null（无激活按钮）
  const [activeBtnId, setActiveBtnId] = useState(null);

  const handleBtnClick = (btnId) => {
    // 点击时将当前按钮ID设为激活状态
    setActiveBtnId(btnId);
  };

  return (
    <div>
      <button
        onClick={() => handleBtnClick('btn1')}
        className={activeBtnId === 'btn1' ? 'active' : ''}
      >
        按钮1
      </button>
      <button
        onClick={() => handleBtnClick('btn2')}
        className={activeBtnId === 'btn2' ? 'active' : ''}
      >
        按钮2
      </button>
      <button
        onClick={() => handleBtnClick('btn3')}
        className={activeBtnId === 'btn3' ? 'active' : ''}
      >
        按钮3
      </button>
    </div>
  );
}

export default ButtonGroup;

解决方案2：多选模式（点击按钮切换自身状态，其余不受影响） #

如果需要支持多个按钮同时处于true状态，点击按钮仅切换自身的激活状态：

import { useState } from 'react';

function ButtonGroup() {
  // 用对象存储每个按钮的激活状态，初始全部为false
  const [activeBtns, setActiveBtns] = useState({
    btn1: false,
    btn2: false,
    btn3: false
  });

  const handleBtnClick = (btnId) => {
    // 复制原有状态，仅修改当前按钮的状态
    setActiveBtns(prevState => ({
      ...prevState,
      [btnId]: !prevState[btnId]
    }));
  };

  return (
    <div>
      <button
        onClick={() => handleBtnClick('btn1')}
        className={activeBtns.btn1 ? 'active' : ''}
      >
        按钮1
      </button>
      <button
        onClick={() => handleBtnClick('btn2')}
        className={activeBtns.btn2 ? 'active' : ''}
      >
        按钮2
      </button>
      <button
        onClick={() => handleBtnClick('btn3')}
        className={activeBtns.btn3 ? 'active' : ''}
      >
        按钮3
      </button>
    </div>
  );
}

export default ButtonGroup;

关键说明 #

• 不要用单个布尔值控制所有按钮的状态，必须为每个按钮分配唯一标识（如ID、key）。
• 通过对象或数组管理多个按钮的状态，确保状态更新仅作用于被点击的按钮。

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