React中切换按钮状态为true时如何修改背景颜色？

你的问题出在两个核心点：一是外层容器.ToggleSwitch的active类被固定写死，没有根据状态动态切换；二是CSS里缺少.ToggleSwitch.active的样式规则，导致状态变化时背景色无法更新。另外代码里的doSearch方法存在错误（类组件不能使用React Hooks写法）且未被调用，建议直接删除。

步骤1：补充激活状态的容器CSS规则 #

在你的CSS中添加激活状态下容器的样式定义：

.ToggleSwitch {
  background: #e3e8eb;
  border: 3px solid #e3e8eb;
  height: 2em;
  width: 4em;
  border-radius: 2em;
  cursor: pointer;
  margin-bottom: 5px;
}

/* 新增：激活状态下的容器样式 */
.ToggleSwitch.active {
  background-color: #f37c22;
  border-color: #f37c22;
}

.ToggleSwitch .knob {
  position: relative;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  left: 0em;
  transition: left 0.3s ease-out;
  border: 1px solid #fff;
  background-color: #fff;
}
.ToggleSwitch .knob.active {
  left: 2em;
  background-color: #f37c22;
  border: 1px solid #f37c22;
}

步骤2：动态切换外层容器的类名 #

修改JSX中外层div的className，根据isToggleOn状态动态添加/移除active类：

import React from "react";
import "./toggleButton.css";

class ToggleButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: false };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn,
    }));
  }

  render() {
    return (
      <div onClick={this.handleClick} className={`ToggleSwitch ${this.state.isToggleOn ? 'active' : ''}`} >
        <div className={this.state.isToggleOn ? "knob active" : "knob"} />
      </div>
    );
  }
}

export default ToggleButton;

额外说明 #

• 删除了原代码中的doSearch方法，因为类组件不允许使用const [searchInput, setSearchInput] = "";这种React Hooks写法，会引发运行时错误，且该方法未被调用属于无效代码。
• 现在点击按钮时，isToggleOn状态切换，外层容器和旋钮会同步切换到激活样式，背景色、旋钮位置及颜色都会正常变化。

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