React 中事件处理函数的this绑定

方法1：箭头函数

import React from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    // 为组件提供状态
    this.state = {
      count: 0,
    };
  }

  handleClick() {
    // 通过 this.setState 来修改组件的状态
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    // 为标签绑定事件处理函数
    return <div onClick={() => this.handleClick()}>计数器：{this.state.count}</div>;
  }
}

export default Counter;

因为箭头函数中没有自己的this,this默认的绑定到父级作用域中的this,点击事件中的this就是 render 函数中的this，而 render 函数中的 this 正确的绑定到了组件实例的this

方法2：Function.prototype.bind

这种方式是直接为函数指定this

import React from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    // 为组件提供状态
    this.state = {
      count: 0,
    };
    // 绑定this
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // 通过 this.setState 来修改组件的状态
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    // 为标签绑定事件处理函数
    return <div onClick={this.handleClick}>计数器：{this.state.count}</div>;
  }
}

export default Counter;

方法3：类的公有字段 - 推荐使用

import React from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    // 为组件提供状态
    this.state = {
      count: 0,
    };
  }

  handleClick = () => {
    // 通过 this.setState 来修改组件的状态
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    // 为标签绑定事件处理函数
    return <div onClick={this.handleClick}>计数器：{this.state.count}</div>;
  }
}

export default Counter;