React中通过onClick事件实现按钮点击变色并重置前一个按钮

你的代码目前无法区分点击的是哪个按钮，导致所有按钮共用同一个样式状态。要实现「点击按钮变色，切换时恢复之前按钮颜色」的效果，核心是跟踪当前选中的按钮标识，而非直接存储样式。

修改后的代码（内联样式版） #

import React, { useState } from "react";
import "../Styles/index.css";

function App() {
  // 用状态存储当前选中的按钮编号，初始为null（无选中）
  const [selectedButton, setSelectedButton] = useState(null);

  // 点击时传入当前按钮的编号，更新选中状态
  function handleButtonClick(buttonId) {
    setSelectedButton(buttonId);
  }

  return (
    <div>
      {/* 每个按钮判断自己是否为选中项，是则应用绿色背景 */}
      <button 
        onClick={() => handleButtonClick("1")}
        style={selectedButton === "1" ? { backgroundColor: "green" } : {}}
      >1</button>
      <button 
        onClick={() => handleButtonClick("2")}
        style={selectedButton === "2" ? { backgroundColor: "green" } : {}}
      >2</button>
      <button 
        onClick={() => handleButtonClick("3")}
        style={selectedButton === "3" ? { backgroundColor: "green" } : {}}
      >3</button>
    </div>
  );
}

export default App;

更优雅的CSS类版（推荐） #

如果想把样式和逻辑分离，建议用CSS类来控制：

1. 在index.css中添加：

.active-button {
  background-color: green;
}

2. 修改组件代码：

import React, { useState } from "react";
import "../Styles/index.css";

function App() {
  const [selectedButton, setSelectedButton] = useState(null);

  function handleButtonClick(buttonId) {
    setSelectedButton(buttonId);
  }

  return (
    <div>
      <button 
        onClick={() => handleButtonClick("1")}
        className={selectedButton === "1" ? "active-button" : ""}
      >1</button>
      <button 
        onClick={() => handleButtonClick("2")}
        className={selectedButton === "2" ? "active-button" : ""}
      >2</button>
      <button 
        onClick={() => handleButtonClick("3")}
        className={selectedButton === "3" ? "active-button" : ""}
      >3</button>
    </div>
  );
}

export default App;

关键说明 #

• 用selectedButton状态记录当前点击的按钮标识，而非直接存样式，这样能精准区分哪个按钮需要变色
• 每个按钮通过判断自身标识是否与selectedButton匹配，来决定是否应用高亮样式
• CSS类版更易于维护，后续修改样式只需调整CSS，无需改动组件逻辑

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