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

时间:2018-03-06 14:49:31

标签: html css reactjs

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

$theValue = 100;// the max
$pi = 0;
for ($i=1; $i<$theValue; $i++){
    if ($i % 2 == 1){
        $pi += 4.0 / ($i * 2 - 1);
    } else {
        $pi -= 4.0 / ($i * 2 - 1);
    }
}

这是CSS!

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

1 个答案:

答案 0 :(得分:0)

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

设置状态

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>

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