React中div的onChange为何在内部input变更时触发？

嘿，这个问题其实涉及到DOM事件冒泡以及React事件系统的工作机制，咱们一步步理清楚：

1. 核心原因：change事件的冒泡特性 #

在标准HTML中，change事件是支持冒泡传播的。当你在<input>中完成输入（通常是失去焦点时触发change，部分输入控件也会在内容实时变更时触发，取决于控件类型），这个事件会沿着DOM树向上逐层传播。你给父级的<div>绑定了onChange处理函数，当事件冒泡到<div>时，自然就会触发这个函数。

React的事件系统是基于原生DOM事件封装的合成事件系统，但它保留了原生事件的冒泡/捕获行为规则。所以你在React中给<div>绑定的onChange，本质上就是在监听该元素上的原生change冒泡事件，内部<input>的change事件向上传递后就会触发它。

2. 官方文档参考位置 #

• React官方文档的「事件处理」章节，里面详细说明了合成事件的传播机制，包括冒泡和捕获的规则，你能找到关于事件冒泡的明确说明。
• MDN的change事件文档，里面会解释该事件的冒泡特性以及触发条件，这是原生DOM层面的标准说明。

小验证技巧 #

如果你想阻止这个行为，可以在<input>的onChange中调用e.stopPropagation()，这样事件就不会向上冒泡到父级<div>了，示例代码如下：

<div onChange={(e) => { console.log('change!', e); }}>
  输入2：<input 
    style={{width: '50%', borderColor: 'black'}}
    onChange={(e) => e.stopPropagation()}
  />
</div>

这样当你输入内容后，<div>的onChange就不会被触发了，刚好能验证冒泡的逻辑。

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