React组件Checkbox状态异常：setState赋值与event.target.checked值反向

这种情况我之前也碰到过，大概率是你的Checkbox组件的checked属性和state值的绑定逻辑搞反了，咱们一步步排查解决：

1. 先检查Checkbox的JSX绑定（最常见原因） #

如果你的Checkbox是这么写的：

<input
  type="checkbox"
  id="myCheckbox"
  checked={!this.state.myCheckbox} // 这里错误地用了取反
  onChange={this.handleChange}
/>

那问题就出在这！你把checked绑定成了state的反值，导致：

• 用户勾选Checkbox时，event.target.checked为true，你setState把myCheckbox设为true，此时checked={!true}变成false，看起来就是勾选后反而取消了
• 用户取消勾选时，event.target.checked为false，setState后myCheckbox是false，checked={!false}变成true，取消后反而勾选了

修正方案：调整checked绑定逻辑 #

把checked直接对应到state的字段，不要额外取反：

<input
  type="checkbox"
  id="myCheckbox"
  checked={this.state.myCheckbox}
  onChange={this.handleChange}
/>

2. 确认handleChange的this指向是否正确 #

你的handleChange逻辑本身没问题，但如果this没有正确绑定到组件实例，也可能出现奇怪的状态更新问题（虽然一般会直接报错，但也可以排查下）：

• 方法一：在构造函数中绑定this

constructor(props) {
  super(props);
  this.state = {
    // 你的初始状态，比如myCheckbox: false
  };
  this.handleChange = this.handleChange.bind(this);
}

• 方法二：把handleChange写成箭头函数（自动绑定this）

handleChange = (event) => {
  if ( event.target.getAttribute('type') === "text"){
    this.setState({ [event.target.id]: event.target.value });
  } else if ( event.target.getAttribute('type') === "checkbox") {
    this.setState({ [event.target.id]: event.target.checked });
  }
}

3. 检查初始state的值 #

确保初始state中对应Checkbox的字段值和你期望的初始勾选状态一致，比如希望Checkbox默认未勾选，初始state里myCheckbox就设为false，避免初始状态不匹配导致第一次点击异常。

你的handleChange逻辑本身是正确的，只要修正上面的绑定问题，就能解决状态反向的问题啦！

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