事件处理

事件绑定

绑定事件有三种写法:

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>;
  }
}

class field

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

  render() {
    return <button onClick={this.handleClick}>click</button>;
  }
}

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

在回调中使用箭头函数

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

  render() {
    return (
      <button
        onClick={() => {
          this.handleClick();
        }}
      >
        click
      </button>
    );
  }
}

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

向绑定事件中传递参数

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

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