它的工作

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

函数初始化它

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

我将状态设置为任何[]类型。并在构造函数中将状态设置为null。

onServiceChange = (e) => {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item => item !== value);
    this.setState(prevState => ({
        services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
    }))
}

在输入元素中

this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / > this.onServiceChange (e)} / >

过了一段时间我才明白。我想这可能对你们都有帮助。

我尝试使用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>
    )
}

}

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

Eg.

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

 <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的值

在React呈现生命周期中，表单元素上的value属性 将覆盖DOM中的值。对于一个不受控制的组件， 你通常希望React指定初始值，但留下 后续更新不受控制。要处理这种情况，您可以指定 使用defaultValue或defaultChecked属性代替value。

        <input
          type="checkbox"
          defaultChecked={true}
        />

Or

React.createElement('input',{type: 'checkbox', defaultChecked: true});

请签出更多关于defaultChecked复选框的详细信息: https://reactjs.org/docs/uncontrolled-components.html#default-values