# 事件处理

# 事件绑定

绑定事件有三种写法:

# bind语法

export default class A extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert("clicked");
  }

  render() {
    return <button onClick={this.handleClick}>click</button>;
  }
}
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# class field

export default class A extends React.Component {
  handleClick = () => {
    alert("clicked");
  };

  render() {
    return <button onClick={this.handleClick}>click</button>;
  }
}
Copied!
1
2
3
4
5
6
7
8
9

class field将事件处理函数绑定在组件实例上, 也就是对于同样的多个 A 组件,它们的handleClick方法都是独自占领一个内存空间的. 如果该组件的复用频率过高, 会拖慢 App 的速度.

# 在回调中使用箭头函数

export default class A extends React.Component {
  handleClick() {
    alert("clicked");
  }

  render() {
    return (
      <button
        onClick={() => {
          this.handleClick();
        }}
      >
        click
      </button>
    );
  }
}
Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class field不同, 这种写法是将事件处理函数绑定在原型上, 也就是多个 A 组件都共用一个handleClick函数. 这种写法也被认为是最佳实践.

# 向绑定事件中传递参数

以下两种方式都可以向事件处理函数传递参数:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
Copied!
1
2