2、react事件相关

react事件相关

1、React 里面绑定事件的方式和在 HTML 中绑定事件类似

注意要显式调用 bind(this) 将事件函数上下文绑定要组件实例上

<p onClick={this.handleClick.bind(this)}></p>

2、“合成事件”和“原生事件”

React 实现了一个“合成事件”层，保证了和 W3C 标准保持一致，消除了 IE 与 W3C 标准实现之间的兼容问题。

• 事件委托：

  • “合成事件”会以事件委托的方式绑定到组件最上层，并且在组件卸载的时候自动销毁绑定的事件。

• 原生事件：

  • 在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件。
  • 使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener。
  • 所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”，建议总是用 React 的方式处理事件。

如果混用“合成事件”和“原生事件”，比如一种常见的场景是用原生事件在 document 上绑定，然后在组件里面绑定的合成事件想要通过 e.stopPropagation() 来阻止事件冒泡到 document，这时候是行不通的，因为 e.stopPropagation 是内部“合成事件” 层面的，解决方法是要用 e.nativeEvent.stopImmediatePropagation()。
“合成事件” 的 event 对象只在当前 event loop 有效，比如你想在事件里面调用一个 promise，在 resolve 之后去拿 event 对象会拿不到（并且没有错误抛出）：

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

3、参数传递

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

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