关于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 (
      <button onClick={this.handleClick}>        
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
   }
}
ReactDOM.render(
  <Toggle />,
  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))
  }