React中为何无法用!checked切换复选框的checked属性？

核心原因：你搞反了event.target.checked的含义 #

你的复选框是受控组件——它的选中状态完全由state里的formData.hasJoined决定，UI严格跟着state走。

event.target.checked不是点击前的状态，而是点击后浏览器已经确定的最终状态：

• 初始时hasJoined=true，复选框是勾选的，你点击它想取消，此时event.target.checked已经变成false了。
• 如果你写!checked，就是把state设为!false = true，和原来的state完全一样，React发现state没变化，就不会触发UI更新，自然看起来没反应。

为什么用checked就能正常切换？ #

还是拿刚才的例子说：

1. 点击取消时，event.target.checked是false，把state里的hasJoined设为false，React检测到state变化，就会把复选框的checked属性更新为false，UI变成未勾选。
2. 下次再点击，event.target.checked变成true，state更新为true，UI又变回勾选。
   这样一正一反，就实现了切换效果。

更稳妥的写法（可选） #

如果不想依赖event.target.checked，可以直接基于之前的state取反，逻辑更直观：

function handleChange(event) {
  const {name, value, type} = event.target
  setFormData(prevState => {
    return {
      ...prevState,
      [name]: type === "checkbox" ? !prevState[name] : value
    }
  })
}

这种写法直接对state里的旧值取反，不管浏览器的checked值是什么，都能保证状态切换正确。

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