React事件摘录

前端之家收集整理的这篇文章主要介绍了React事件摘录前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JSX 中以内联(inline)的方式

<button onClick={this.increase}>+</button>

合成事件 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 对象会拿不到(并且没有错误抛出):

handleClick(e) {
  promise.then(() => doSomethingWith(e));
}

参数传递

给事件处理函数传递额外参数的方式:bind(this,arg1,arg2,...)

render: function() {
    return <p onClick={this.handleClick.bind(this,'extra param')}>;
},handleClick: function(param,event) {
    // handle click
}

猜你在找的React相关文章