React复选框调用event.preventDefault()破坏onChange功能的原因是什么？

核心原因 #

该问题本质是React受控组件的事件处理逻辑和preventDefault()的交互冲突，核心流程可以拆解为以下几步：

1. 原生复选框的点击触发逻辑：用户点击复选框时，浏览器会先执行默认行为，临时切换DOM的checked属性值，之后才触发change事件。
2. React受控组件的处理逻辑：当给复选框绑定checked属性后，React会以自身state的值作为唯一可信来源，默认会将DOM状态和React状态做同步。
3. preventDefault()的干扰：在onChange回调中调用event.preventDefault()时，React会判定开发者主动要取消本次用户输入对应的原生状态变更，会主动将DOM的checked值回退到本次点击前的状态（也就是false）。
4. 本次更新的异常：接下来React处理setState的批更新时，会触发Diff逻辑，此时React会因为本次change事件的默认行为已经被阻止，跳过本次对复选框checked属性的DOM更新——哪怕state已经改成了true，本次渲染不会同步到DOM上。
5. 下一次渲染才更新：等到其他操作触发重渲染时，没有了当前change事件的preventDefault()标记干扰，React会正常读取最新的state值，将DOM的checked属性更新为和state一致的状态，所以才会出现视觉状态滞后一次更新的现象。

常见误区说明 #

受控组件“独立于浏览器原生事件运行”是对其设计理念的误解：受控组件只是把状态的控制权从原生DOM转移到了React层，其底层依然是基于原生DOM事件实现的交互，会遵循DOM事件的基础规则，preventDefault()的影响依然会生效。

解决方案 #

直接删除onChange回调中的event.preventDefault()即可。受控复选框不需要手动阻止默认行为，只需要通过修改绑定的state值就能完全控制其选中状态。

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