如何在选中时设置值 true 并在未选中时设置 false答案

【问题标题】：How do I set a value true on checked and false on unchecked如何在选中时设置值 true 并在未选中时设置 false
【发布时间】：2020-11-23 02:14:59
【问题描述】：

我正在开发一个带有复选框的 React 应用程序。我想包含一个复选框，选中时发送 true，未选中时发送 false。我的 onChange 是：

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

输入是：

<label>
   <input type="checkbox" class="filled-in" value="true" id="My Value" 
     onChange={this.handleChange} />
    <span>My Value</span>
</label>

我的州有：

   state = {
        My Value = ''
             }

当我选中复选框提交时，它工作正常。问题是当我选中和取消选中时，该值保持为真而不是更改为假。我怎样才能解决这个问题。请帮忙。

谢谢。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将value="true" 更改为value={this.state["My Value"]}

【讨论】：

【解决方案2】：

更新处理程序以使用来自事件的检查值

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

并且不要对输入的检查值进行硬编码

<label>
  <input
    type="checkbox"
    className="filled-in"
    value={this.state['My Value']}
    id="My Value"
    onChange={this.handleChange}
  />
  <span>My Value</span>
</label>

【讨论】：