reactjs - 处理复选框的 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属性(property)

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

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} />