Checkbox类型input的onChange事件触发时机及React代码疑问解析

一、原生HTML中Checkbox的onChange触发时机 #

原生<input type="checkbox">的onChange事件，触发时机是用户通过点击、键盘操作（比如空格、回车）完成复选框勾选状态切换后——也就是说，当复选框从「未勾选→勾选」或「勾选→未勾选」的状态变更完成的瞬间，事件就会触发，不存在“状态变更前触发”的情况。

二、你的React代码问题分析 #

你觉得事件“在状态变更前触发”，本质是代码里的状态更新逻辑出错了，导致复选框状态没正确同步：

1. 错误的状态更新方式 #

你用了setChecked(~checked)，这里的~是JS的按位取反操作符：

• 当checked是false（等价于数值0）时，~0结果是-1；
• 当checked是true（等价于数值1）时，~1结果是-2。

而React的checked属性只识别布尔值，非布尔值会被强制转换：-1和-2都会被转为true。这就导致不管你怎么点击复选框，checked状态永远是true，复选框一直处于勾选状态，让你产生“事件触发了但状态没变更”的错觉。

2. 受控组件的逻辑修正 #

在React受控组件中，用户操作复选框时，浏览器会先尝试修改DOM状态，但因为你设置了checked={checked}，React会立刻将DOM状态同步回checked的当前值。你需要把状态更新逻辑改成正确的布尔取反：

export default function(){
    const [checked, setChecked] = useState(false);
    const handleCheck = () => {
        // 用!来取反布尔值，正确切换状态
        setChecked(!checked);
    };  

    return <div>
          <input checked={checked} onChange={handleCheck} type="checkbox"/>
     </div>
}

这样每次触发onChange时，状态会正确在true和false之间切换，复选框的显示也会和状态同步，你就能看到正常的状态变更效果了。

内容的提问来源于stack exchange，提问作者Chinnmay B S