react事件介绍

在react中绑定事件和在html中类似,使用驼峰命名方式来绑定事件。事件接收的值不再是字符串而是一个函数。事件触发时执行这个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MyComponent extends React.Component {

handleClick(event) {
console.log(event)
}

render() {
return (
<button onClick={this.handleClick}>
点击事件
</button>
);
}
}

ReactDOM.render(
<MyComponent />,
document.getElementById('root')
);

上边的的代码可以看到,onClick指向了一个函数,这个函数有个事件参数。这里接收的event参数并非原生事件,而是react封装的SyntheticEvent.

SyntheticEvent

SyntheticEvent有以下特点:

  1. 所有事件都代理到组件的最上层;
  2. 按照原生事件封装了标准事件的属性和方法;
  3. 抹平了事件在IE和W3C标准上的差异;
  4. 不能通过异步的方式访问SyntheticEvent;

事件代理

react 事件自动使用了事件代理,所有事件都代理到组件的最上层。所以不用担心事件绑定带来的性能问题。

SyntheticEvent属性

每个SyntheticEvent有以下属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

IE和标准浏览器差异

在IE中也需要使用stopPropagation()preventDefault()来阻止冒泡和默认事件。在react v0.14以后不能使用return false来阻止冒泡和默认事件。

异步调用事件

SyntheticEvent在当前组件中是公用的,当事件执行完毕,SyntheticEvent中的属性会被清空,等待下一次调用。所以在异步操作之后不能访问SyntheticEvent。如果想访问的话就需要使用e.persist()将事件单独提出来,这样事件就会一直存在。


欢迎转载,注明出处。原文地址:http://marxjiao.com/2017/05/11/react-event/