React中如何实现同class多按钮独立切换背景色

你的问题核心是用单个状态控制了所有按钮，导致点击时所有按钮的样式同步变化。下面是符合React范式的解决方案，通过一个状态对象统一管理所有按钮的激活状态，无需为每个按钮单独创建状态和事件监听器：

原代码的问题分析 #

1. 单个toggle状态无法区分不同按钮，所有按钮共享同一个开关状态
2. 直接操作DOM绑定事件不符合React的声明式编程思想，而且初始化时就会立即执行setToggle(!toggle)（不是点击时触发）

解决方案代码 #

JSX部分

function App() {
  // 用对象存储每个按钮的激活状态，键为按钮唯一标识（这里用索引），值为布尔值
  const [activeButtons, setActiveButtons] = useState({});

  // 点击处理函数：切换对应按钮的状态
  const handleButtonClick = (buttonId) => {
    setActiveButtons(prevState => ({
      ...prevState,
      [buttonId]: !prevState[buttonId] // 反转当前按钮的激活状态
    }));
  };

  // 生成4个独立的设置按钮
  return (
    <div className='container'>
      {Array.from({ length: 4 }).map((_, index) => (
        <button
          key={index}
          className={`settings ${activeButtons[index] ? 'change-color' : ''}`}
          onClick={() => handleButtonClick(index)}
        >
          设置按钮 {index + 1}
        </button>
      ))}
    </div>
  );
}

CSS部分（保持不变）

.settings {
    background-color: white;
    padding: 8px 16px;
    margin: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
} 
.change-color {
    background-color: blue;
    color: white;
}

方案说明 #

• 用activeButtons对象统一管理所有按钮的状态，每个按钮通过唯一标识（这里用循环索引，也可以用自定义ID）对应自己的激活状态
• 点击按钮时，仅更新该按钮对应的状态值，其他按钮的状态不受影响
• 通过map批量生成按钮，新增按钮只需调整Array.from({ length: 4 })中的数字即可，扩展性强
• 完全遵循React的声明式编程，无需直接操作DOM

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