今天在看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))
}
