问题:在ES6的class中是不会自动绑定this的,所以需要我们自定绑定。
示例:
class Example extends React.Component {
numberIncrease() {
console.log(this);
}
render() {
return (
<button onClick={ this.numberIncrease}>click me</button>
);
}
}
若点击button时,输出为 null
解决方案:
1、使用双箭头
<button onClick={ () => this.numberIncrease() }>click me</button>
此时再点击button,输出为当前object。
原理解析:
function render() {
var _this2 = this;
return _react2.default.createElement(
'button',
{ onClick: function onClick() {
return _this2.numberIncrease();
} },
'click me'
);
}
2、bind 方法
在构造函数中使用bind。
class Example extends React.Component {
constructor() {
super();
this.numberIncrease = this.numberIncrease.bind(this)
}
numberIncrease() {
console.log(this);
}
render() {
return (
<button onClick={this.numberIncrease}>test2</button>
);
}
}
原理解析:
Function.prototype.bind = function(context){
self = this; //保存this,即调用bind方法的目标函数
return function(){
return self.apply(context,arguments);
};
};