React/practise/13.this的指向问题.jsx

import React from 'react'

class Test extends React.Component {
  // constructor 属性返回对象的构造函数,用于创建和初始化在类中创建的对象
  constructor() {
    super()
    /*     第一种修正 this 指向的方法：
    使用 bind 强行修正我们的 this 指向
    相当于在类组件初始化的阶段，就可以把回调函数的 this 修正到
    永远指向当前组件实例对象 */
    this.handler = this.handler.bind(this) // 前面的 this.handler 是挂载到实例属性上，后面的 this.handler 是下面 handler() 方法
  }

  handler() {
    // 错误演示
    console.log(this) // 这里的 this 是 undefined
    // this.setState 去修改数据会报错
  }

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

function App() {
  return <Test></Test>
}

export default App