React类组件this问题

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: 'hello react'
    }
  }
  myFn() {
    console.log(this); // undefined
  }
  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.myFn}>按钮</button>
      </div>
    )
  }
}

无法拿到 this 的原因是这个点击事件是React通过 apply 来调用的，在调用的时候修改了 myFn 函数的 this 为 undefined 

 

解决方案

将 myFn 修改为箭头函数

myFn = () => {
    console.log(this); // App{ state:{message:'hello react'}, myFn:f, ...}
  }

• 箭头函数不会创建自己的 this ，只会从自己的作用域链的上一层继承this 

将点击事件的函数修改为箭头函数可以解决 this 是 undefined 的情况，但没有解决传递参数的问题。

我们需要在定义点击事件的时候使用一个箭头函数，在这个箭头函数体里面去调用 myFn 方法，就可以解决传递参数的问题

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: 'hello react'
    }
  }
  myFn = (num) => {
    console.log(num); // 66
  }
  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={() => this.myFn(66)}>按钮</button>
      </div>
    )
  }
}

这样可以在触发 myFn 函数时，传递参数。

事件对象

在触发事件时，会自动传递一个 react 包装过的事件对象给我们使用

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: 'hello react'
    }
  }
  myFn = (e) => {
    console.log(e);
  }
  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={(event) => this.myFn(event)}>按钮</button>
      </div>
    )
  }
}