React事件 改变this指向

1.普通函数 写成箭头函数
普通函数打印出来是undefined

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
  state = {
    username:'万科'
  };
  btnClick(){
    console.log(this) // undefined
  }
  render() {
    return <div>
      <h1 onClick={this.btnClick}>普通函数</h1> 
    </div>
  }

}
ReactDOM.render(<Header></Header>, document.getElementById('root'));

箭头函数 打印出Header中所有内容。
es6箭头函数没出现之前，this的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的。而箭头函数刚好相反，箭头函数的this指向是函数被创建时绑定的，它的指向就是该函数所在的作用域指向的this，并且不会因为被怎么样的方式调用改变绑定，没有上下文对象，this就指向window。

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
  state = {
    username:'万科'
  };
  btnClick(){
    console.log(this) // 指向class 定义的 Header
  }
  render() {
    return <div>
      <h1 onClick={()=>{
        this.btnClick();
      }}>箭头函数</h1> 
    </div>
  }

}
ReactDOM.render(<Header></Header>, document.getElementById('root'));

2. 第二种箭头函数 改变this指向 (推荐使用)

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
  state = {
    username:'万科'
  };
  btnClick = () =>{  //箭头函数
    console.log(this) //  指向class 定义的 Header
  }
  render() {
    return <div>
      <h1 onClick={this.btnClick}>普通函数</h1> 
    </div>
  }

}
ReactDOM.render(<Header></Header>, document.getElementById('root'));

3. 使用bind 修改 this指向

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class Header extends React.Component {
  state = {
    username:'万科'
  };
  btnClick () {
    console.log(this)
  }
  render() {
    return <div>
      <h1 onClick={this.btnClick.bind(this)}>bing 改变this指向</h1> 
    </div>
  }

}
ReactDOM.render(<Header></Header>, document.getElementById('root'));