React中checked属性管理问题：复选框onChange事件丢失

先搞懂React对checked属性的管理逻辑 #

当你给复选框（<input type="checkbox">）绑定checked属性时，这个组件就变成了受控组件——它的选中状态完全由你传入的checked值决定，DOM自身的状态会被React强制同步到你指定的值上。简单说：你状态里是啥，复选框就必须是啥，浏览器自己的默认状态变化会被React覆盖。

你的问题到底出在哪？ #

按你描述的流程一步步拆解：

• 点击复选框时，事件捕获阶段先触发body上绑定的捕获事件，这个事件会更新状态（比如把弹窗的显示状态设为false），直接导致整个组件重新渲染。
• 重新渲染时，因为复选框是受控组件，React会把它的checked值强制设回你状态里的旧值（毕竟这时候复选框的onChange还没触发，你还没更新状态里的选中值）。
• 浏览器原生逻辑是：用户点击复选框，先切换DOM的checked状态，再触发change事件。但React在捕获阶段就把DOM的checked值改回了原来的状态，浏览器会认为“这个复选框的状态根本没变化”，所以直接跳过了change事件的触发——你的onChange自然就跑不起来。

为什么去掉checked绑定就正常？ #

去掉checked后，复选框变成了非受控组件，它的选中状态由浏览器自己管理，React不会主动去修改它的checked值。哪怕组件因为弹窗关闭重新渲染，也不会影响DOM的状态，浏览器能正常完成“点击→切换状态→触发change事件”的流程，你的onChange就能正常执行。

推荐的正确处理方式 #

不想放弃受控组件的话，可以在body的捕获事件里加个判断：如果点击的目标是复选框（或者复选框的父元素），就不执行关闭弹窗的逻辑。比如：

const handleBodyClick = (e) => {
  if (e.target.closest('input[type="checkbox"]')) return;
  setShowModal(false);
};

或者把body上的事件从捕获模式改成冒泡模式（去掉第三个参数true），这样onChange会先执行，更新复选框的状态后，再执行关闭弹窗的逻辑，就不会有冲突了。

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