仅CSS切换开关在ReactJs中不起作用

Question

我正在尝试使用纯CSS在ReactJS上使用切换切换器而不是复选框。该开关呈现的方式应该如何，但单击它时没有任何反应。该开关不能正常工作，但在没有React时使用。

<div className="switch">
   <input id="toggler-1" className="toggler toggler-round" type="checkbox" />
   <label for="toggler-1"></label>
</div>

.toggler {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.toggler + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.toggler-round + label {
  padding: 2px;
  width: 40px;
  height: 20px;
  background-color: #dddddd;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}
input.toggler-round + label:before, input.toggler-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.toggler-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s;
}
input.toggler-round + label:after {
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s;
}
input.toggler-round:checked + label:before {
  background-color: #8ce196;
}
input.toggler-round:checked + label:after {
  margin-left: 60px;
}

我不确定是什么原因造成的。 React不支持这种功能吗？

Answer 1

根据反应文档：

Since JSX is JavaScript, identifiers such as class and for are discouraged as 
XML attribute names. Instead, React DOM components expect DOM property names 
like className and htmlFor, respectively.

确保您使用htmlFor代替for

<div className="switch">
   <input id="toggler-1" className="toggler toggler-round" type="checkbox" />
   <label htmlFor="toggler-1"></label>
</div>

我在js.fiddle中测试了它，但是转换长度超过了按钮长度，纯html / css情况和反应都是如此。然而，切换现在正在起作用：

fiddle