react 事件调用时 this is not defined 指向方法的三种解决方法

香菊网 发表于: 2019-05-31 分类: js部分  前端front  H5部分  

这是因为ES6写法,也就是类(Class)的写法,React默认不会自动绑定类中的方法造成的,

在React官方对建构式样式(ES6类别)定义方式与工厂样式(也就是使用React.createClass方法)的说明中,有一个非常大的差异,称为"Autobinding"(自动绑定),工厂样式中的this值是会自动绑定的,但建构式样式(ES6类别)定义方式的this值"不会"再自动绑定。

第一种是在建构式中constructor加入绑定你定义的方法的语句:

class xiangjvModel extends React.Component {
  constructor() {
    super()
    this.tick = this.tick.bind(this);
  }
  tick() {
    //...
  }
  render(){...}
}

第二种是用箭头函式语法来宣告方法:

class xiangjvModel extends React.Component {
  tick = () => {
    //...
  }
  //...
}

// 或者在render里面去用箭头
class xiangjvModel extends React.Component {
  tick(){
    //...
  }
  render(){
    return(
        <div onClick={()=>{this.tick}}></div>
    )
  }
}

第三种利用调用时对this的绑定:


class xiangjvModel extends React.Component {
  tick(){
    //...
  }
  render(){
    return(
        <div onClick={this.tick.bind(this)}></div>
    )
  }
}
标签: js部分前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮