脚本宝典收集整理的这篇文章主要介绍了React事件摘录，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 <button onClick={this.increase}>+</button> @H_777_27@
合成事件 SyntheticEvent
React 实现了一个“合成事件”层（synthetic event System），这个事件模型保证了和 W3C 标准保持一致，所以不用担心有什么诡异的用法，并且这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。
“合成事件”还提供了额外的好处：
事件委托
“合成事件”会以事件委托（event delegation）的方式绑定到组件最上层，并且在组件卸载（unmount）的时候自动销毁绑定的事件。
什么是“原生事件”？
比如你在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件。
使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener。
所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”，除非你有特别的理由，建议总是用 React 的方式处理事件。
如果混用“合成事件”和“原生事件”，比如一种常见的场景是用原生事件在 document 上绑定，然后在组件里面绑定的合成事件想要通过 e.stopPropagation() 来阻止事件冒泡到 document，这时候是行不通的，参见 Event delegation，因为 e.stopPropagation 是内部“合成事件” 层面的，解决方法是要用 e.nativeEvent.stopImmediatePRopagation()
”合成事件“ 的 event 对象只在当前 event loop 有效，比如你想在事件里面调用一个 promise，在 resolve 之后去拿 event 对象会拿不到（并且没有错误抛出）：

      

      
      DOSomethingWith(e));
}" title="" data-original-title="复制">
      
      
handleClick(e) {
  promise.then(() => doSomethingWith(e));
}
参数传递
给事件处理函数传递额外参数的方式：bind(this, arg1, arg2, ...)

      

      
      am, event) {
    // handle click
}" title="" data-original-title="复制">
      
      
render: function() {
    return <p onClick={this.handleClick.bind(this, 'extra param')}>;
},
handleClick: function(param, event) {
    // handle click
}
脚本宝典总结
       
以上是脚本宝典为你收集整理的React事件摘录全部内容，希望文章能够帮你解决React事件摘录所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。