React的合成事件，所有事件都冒泡到document，带来的一个方便的地方就是，原本原生事件不支持冒泡的，在React中都支持冒泡
例如 focus，blur，change，submit，reset，select 等事件不支持冒泡，
但是在 React中，可以使用同名的合成事件来支持冒泡，这样可以带来一个好处，减少事件挂载
例如 对 radio 组挂载change事件
在原生 html 中，应该是这样
<div> <label className="rd"><input type="radio" value="1" name="gender" onchange="getValue(this)" /> Male </label> <label className="rd"><input type="radio" value="2" name="gender" onchange="getValue(this)" /> Female </label> <label className="rd"><input type="radio" value="3" name="gender" onchange="getValue(this)" /> Other </label> </div>
要挂载多次onchange事件
当然，使用js或jquery可能会省点事
//js必须使用forEach，不能直接对集合绑定事件 var radios = document.querySelectorAll('input[type=radio][name="gender"]'); radios.forEach(radio => radio.addEventListener('change', () => alert(radio.value))); //jquery可以对集合绑定事件 $('input[type=radio][name="gender"]').on('change', function() { alert(this.value); });
而在React中，可以直接在父元素上挂载onChange事件，简化代码
<div onChange={this.onChangeValue}> <label className="rd"><input type="radio" value="1" name="gender" /> Male </label> <label className="rd"><input type="radio" value="2" name="gender" /> Female </label> <label className="rd"><input type="radio" value="3" name="gender" /> Other </label> </div>
此思路可以扩展，用以处理其他问题，待补充