关于React组件,要给回调使用的函数绑定this的理解

今天在看react官网,看到下面的代码

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 为了在回调中使用 `this`,这个绑定是必不可少的    
    this.handleClick = this.handleClick.bind(this);  
  }
  handleClick() {    
    this.setState(state => ({      isToggleOn: !state.isToggleOn    })); 
  }
  render() {
    return (
      
    );
   }
}
ReactDOM.render(
  ,
  document.getElementById('root')
);

官网有如下注释

你必须谨慎对待 JSX 回调函数中的 this,在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined

我记得class好像不用单独去绑定this,于是我去看了es6,确实不用,但react官网的意思是 当函数作为回调函数被调用时,上面代码中onClick={this.handleClick}其实就是把handleClick传入onClick作为回调函数,可以理解为如下代码

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
  getAsyncData(cb) {
    return cb();
  }
  print(){
    return this.getAsyncData(this.toString)
  }
}
var o=new Point(1,2)
o.print()//此时报错 this is undefined

解决办法有很多,其中一种就可以用bind

 print(){
    return this.getAsyncData(this.toString.bind(this))
  }

你可能感兴趣的:(关于React组件,要给回调使用的函数绑定this的理解)