我无法设置复选框的样式！点击它，颜色应该改变，但我无法定位它

Question

白色部分应该在勾号上。起初整个东西应该是黑色的，它应该在点击时变白。我在故事书上尝试。另外，请帮我解决问题。

  <span className={css.cb}>
    <input type="checkbox" value="1" id="checkboxInput" name=""/>
      <label for="checkboxInput"></label>
  </span>

这是CSS！

 @import "base.scss";

    .cb {
     display: inline-block;

     position: absolute;
     width: 20px;
     height: 20px;
     left: 10px;
     top: 5px;

     background: #000000;
     border-radius: 5px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.75);
   }

    .cb label {

    display: inline-block;

    position: absolute;
    width: 12px;
    height: 12px;
    left: 4px;
    top: 10px;

    background: #000000;
    border-radius: 5px;
   }

   .cb input[type=checkbox]:checked + label {
      background: #FFFFFF;
    }

Answer 1

看看我是否理解你的问题。你想在点击复选框的基础上改变span的类。为此你需要反应类的状态，处理方法点击复选框，你现在的代码几乎没有变化

设置状态

constructor(props){
super(props)
this.state = {
 isChecked = false
}
 this.handleClick = this.handleClick.bind(this)
}

这可能是你的类的构造函数 下面我们正在设定方法

handleClick(e){
e.preventDefault()
this.setState({"isChecked":!this.state.isChecked})
}

这可以是你的方法 这包含您当前代码中所需的一些更改。

<span className={this.state.isChecked?"yourClassForWhiteBackground":"yourClassForBlackBackground"}>
    <input type="checkbox" onClick={this.handleClick}value="1" id="checkboxInput" name=""/>
  <label for="checkboxInput"></label>
</span>

希望是您正在寻找的解决方案