处理复选框的 onChange

Question

我有false默认状态。当复选框被选中时，我希望状态变为true.

state = {
    status: false,
}

handleChange = (event) => {
    this.setState({
      [event.target.id]: event.target.value
    });
}


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    value={this.state.status}
    onChange={this.handleChange} />

当我单击复选框时，状态不会改变。它总是假的。

Answer 1

我认为实际上有两个问题。

1. 你应该使用 event.target.checked
2. 你应该检查checked 属性

确保在复选框中将 id 设置为“状态”。

state = {
    status: false,
}

handleChange = (event) => {
    this.setState({
      [event.target.id]: event.target.checked
    });
}


 <Form.Check
    type="checkbox" 
    label="Consigne temporaire"
    checked={this.state.status}
    onChange={this.handleChange} />