Question

我尝试在React中实现W3Schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch上的切换开关示例。

那是我的课程：

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（与W3Schools示例相同）：

.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);
}

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

Answer 1

找到了解决方案。我修改了CSS，使其在切换时有两个不同的类，在单击时可以使用TSX切换该类。这样，React可以看到更改并重新绘制组件。

React vs CSS动画（转换：translateX）

1 个答案: