React 类组件 this 写法

先看一段代码，其 this 指向需要修正

import React from "react";

class Comp extends React.Component {
  state = { a: 1 }
  handleClick() {
    console.log(this, 'handleClick');  // undefined 'handleClick'
    this.setState({ a: this.setState.a + 1 })  // 报错 Cannot read properties of undefined (reading 'setState')
  }
  render() {
    return (
      <div className="comp">
        <span>{this.state.a}</span>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}

上诉代码中是属于在 react 中 this 有问题的写法，在handleClick 方法中 this是 undefined ，所以我们就无法使用 this.setState 去修改 state 数据状态，为什么呢？就因为 this 是 undefined ，你咋去访问 setState 方法。

但是我就是非要这么写，怎么整？

方法1，通过在 constructor 里面修改 this 指向

class Comp extends React.Component {
  constructor() {
    super()
    // console.log(this); 在这里 this 能输出
    this.handleClick = this.handleClick.bind(this)  // 强行修改 this 指向
  }
  state = { a: 1 }
  handleClick() {
    console.log(this, 'handleClick');  // Comp {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …} 'handleClick'
    this.setState({ a: this.state.a + 1 })  // 该方法能访问使用
  }
  render() {
    return (
      <div className="comp">
        <span>{this.state.a}</span>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}

方法2，箭头函数写法，访问 render 的 this

下述代码在表达式中通过使用箭头函数来修改 this ，使其指向父级 render函数 的 this ，render函数里面的 this 是可以访问的（在其 react 内部就做了修改，指向实例对象），不同于上述的 handleClick

class Comp extends React.Component {
  state = { a: 1 }
  render() {
    return (
      <div className="comp">
        <span>{this.state.a}</span>
        <button onClick={() => this.setState({ a: this.state.a + 1 })}>click</button>
      </div>
    )
  }
}

所以说，别跟这个 this 过意不去，最通用的写法吧，绿色环保，安全无误

class Comp extends React.Component {
  state = { a: 1 }
  handleClick = () => {
    console.log(this, 'handleClick');  // Comp {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …} 'handleClick'
    this.setState({ a: this.state.a + 1 })
  }
  render() {
    return (
      <div className="comp">
        <span>{this.state.a}</span>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}

---

ES6 class 语法
ES6 class 继承