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/