处理复选框的 onChange答案

【问题标题】：Handle onChange for checkbox处理复选框的 onChange
【发布时间】：2020-02-05 12:40:58
【问题描述】：

我的默认状态是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} />

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

【问题讨论】：

你是否为Form.Check组件中的复选框分配了“状态”id？
我试过了，还是不行

标签： reactjs checkbox react-bootstrap

【解决方案1】：

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

你应该使用event.target.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} />

【讨论】：

【解决方案2】：

尝试设置checked prop 而不是value：

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

【讨论】：

【解决方案3】：

复选框应该只是切换state 中的boolean 值，这是有道理的，因为这是一个受控输入。试试这样的：

state = {
    status: false,
}

handleChange = (event) => {
    this.setState((prevState) => {
       return {
          ...prevState,
          status: !prevState.status
       }
    })
}


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

【讨论】：

这不起作用。复选框的有效类型是：字符串 |字符串[] |数字（根据 TypeScript）。这意味着您不能将值设置为布尔值。如果这样做，则会引发错误：“类型 'false' 不可分配给类型 'string | number | string[] | undefined'。”

【解决方案4】：

也许你可以这样尝试：

state = {
 status: false,
}

handleChange = (event) => {
 this.setState({
  status: event.target.checked
 });
}


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

【讨论】：

【解决方案5】：

将 event.target.id 更改为状态
状态 = { 状态：假， }

handleChange = (event) => {
    this.setState({
      status: event.target.value
    });
}


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

【讨论】：