React vs CSS动画（变换：translateX）

我尝试在React中实现切换开关示例on

那是我的班级：

class ToggleSwitch {
  constructor(props: any) {
    super(props);

    this.state = { checked: this.props.checked };
    this.toggle = this.toggle.bind(this);
  }

  public render() {
    return (
      <label className="switcher">
        <input type="checkbox" onClick={this.toggle} defaultChecked={this.state.checked} />
      <span className="slider"/>
    </label>,
    document.getElementById("toggleSwitch")
    );
  }
  private toggle() {
    const checked = !this.state.checked;
    this.setState({checked});
    console.log("Checked: " + checked);
  }
}

遗憾的是，在调用“切换”时，“我的切换”按钮不会渲染任何动画。 我的错误在哪里？

找到了解决办法。 我已经修改了CSS，使其具有两个不同的类用于切换，而TSX用于在单击时切换该类。

---

这样做可以看到更改并重新绘制组件。

W3C与W3C没有任何形式、形状或形式的关系。编辑您的问题以反映这一点。请使用问题上的编辑链接添加其他信息。回答后按钮只能用于完整回答问题。-这是对这个问题的完整回答。。。将CSS类拆分为两个不同的类，一个用于左侧，一个用于右侧解决了问题。代码已经针对问题编写，只是拆分而不是使用转换。“主要编辑”只是选择它必须使用的类的一个假设。

.switcher {
  position: relative;
  display: inline-block;
  width: 112px;
  height: 72px;
  cursor: pointer;
}

.switcher input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc;
  transition: .4s;
 border-radius: 36px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 60px;
  width: 60px;
  right: 8px;
  left: 8px;
  bottom: 6px;
  background-color: #ffffff;
  transition: .4s;
  border-radius: 50%;
}

.input:checked + .slider {
  background-color: #009ee3;  
}

.input:checked + slider:before {
 transform: translateX(36px);
}