<div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange（event）{ console.log（“event”，event.target.checked） }

上面的句柄在选中或未选中时给你true或false的值

要与复选框交互，您需要在更改复选框后更新复选框的状态。你可以使用defaultChecked来设置默认值。

一个例子:

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange（event）{ console.log（“event”，event.target.checked） }

上面的句柄在选中或未选中时给你true或false的值

在我的情况下，我觉得“defaultChecked”不能正常工作的状态/条件。所以我用“checked”和“onChange”来切换状态。

Eg.

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

我尝试使用Class组件来实现这一点: 您可以查看相同的消息

…

class Checkbox extends React.Component{
constructor(props){
    super(props)
    this.state={
        checked:true
    }
    this.handleCheck=this.handleCheck.bind(this)
}

handleCheck(){
    this.setState({
        checked:!this.state.checked
    })
}

render(){
    var msg=" "
    if(this.state.checked){
        msg="checked!"
    }else{
        msg="not checked!"
    }
    return(
        <div>
            <input type="checkbox" 
            onChange={this.handleCheck}
            defaultChecked={this.state.checked}
            />
            <p>this box is {msg}</p>
        </div>
    )
}

}

取值为true或false defaultChecked={true}

<input type="checkbox"
        defaultChecked={true}
        onChange={() => setChecked(!checked)}
      />