React JS中获取复选框值始终返回false的技术问题咨询

核心问题原因 #

• 取值逻辑错误：复选框的选中状态是DOM的checked属性承载的，不是value属性。原代码在onChangeEtat中读取e.target.value，拿到的永远是input标签上预定义的value值，完全获取不到用户勾选产生的布尔状态。
• 受控绑定属性错误：复选框需要通过checked属性和组件state做受控关联，原代码把布尔值绑在了value属性上，React根本不会通过value值控制复选框的选中状态。
• 事件绑定语法错误：原代码写的onChange={!this.onChangeEtat}，对事件处理函数引用做了逻辑取反，最终传给onChange的不是可执行的回调函数，而是布尔值false，勾选事件的逻辑完全没有触发。

修复后的正确实现 #

1. 修正事件处理函数的取值逻辑，从checked属性读取状态：

onChangeEtat(e) {
    this.setState({
        // 复选框的勾选状态直接从checked字段读取，得到的就是准确的布尔值
        etat: e.target.checked
    });
}

2. 修正input元素的绑定属性，去掉多余的取反逻辑：

<input 
  type="checkbox" 
  className="form-control" 
  // 用checked属性和state做受控双向绑定
  checked={this.state.etat}
  // 直接传入绑定好this的事件处理函数，不要多余的取反操作
  onChange={this.onChangeEtat}
/>

额外注意：你贴的代码片段里还存在语法缺失的问题，constructor内的state定义缺少闭合的对象括号，类组件本身也缺少对应的闭合大括号，补全这些语法问题后代码才能正常运行。

内容的提问来源于stack exchange，提问作者reactjsfan