React中this指向问题

一、问题

例如 平常绑定事件我们一定会这么写

//创建组件
class Demo extends React.Component{
state = {
    name:'张三'
}
//展示左侧输入框的数据
showData(){
  alert(this.state.name); //此时的this为undefined
}
render(){
  return(
    <div>
      <button onClick={this.showData}>点我</button>&nbsp;
    </div>
  )
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

为什么this没有指向当前类呢，其实很简单 this 本质上就是指向它的调用者 所以自然指向不会是当前类

例如如下案例

//创建一个Person类
class Person {
//构造器方法
constructor(name,age){
  this.name = name
  this.age = age
}
speak(){
  console.log(this);
}
}
const test = new Person('张三',19)
let speak = test.speak
test.speak() //当前实例
speak() //undefined

然而为什么是undefined不是window呢，因为class里面其实自带严格模式，在babel转义中也是严格模式的，如下图 在顶端加上了 "use strict";这样就开启的严格模式，所以就为undefined，好奇的小伙伴也可以试试

function fn(){
  "use strict";
  console.log(this);
}
fn()

 二、解决问题

        方法 一，用bind改变this指向

//创建组件
class Demo extends React.Component{
state = {
    name:'张三'
}
//展示左侧输入框的数据
showData(){
  alert(this.state.name); 
}
render(){
  return(
    <div>
      <button onClick={this.showData.bind(this)}>点我</button>&nbsp;
    </div>
  )
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

        方法二，用es6的减头函数this指向上一层 特性

//创建组件
class Demo extends React.Component{
state = {
    name:'张三'
}
//展示左侧输入框的数据
showData = ()=>{
  alert(this.state.name); 
}
render(){
  return(
    <div>
      <button onClick={this.showData}>点我</button>&nbsp;
    </div>
  )
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

额外在说说函数传参把，这里不能像vue一样，直接  onClick={this.showData('张三')} ，这样的它绑定的是showData的返回值，从而不能这么写

解决办法

onClick={()=>this.showData('张三')} //方法一
onClick={this.showData.bind(this,'张三')} //方法二