事件函数中,this绑定问题
课外阅读,参考资料:javascript - js中的this总结 - 山外de楼 - SegmentFault 思否
如果没有特殊处理,在事件处理函数中,this指向undefined
- 使用bind函数,绑定this
- 写在构造函数中,把
[[prototype]]
中的方法提取出来 - 在传递时绑定
this
- 写在构造函数中,把
- 使用箭头函数
- 方法使用箭头函数
- 在传递时使用箭头函数
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleOver = this.handleOver.bind(this);
}
<Tick
onClick={this.handleClick.bind(this)}
clickOver={this.handleOver.bind(this)} />
handleClick = ()=>{
console.log(this);
console.log('点击了');
}
handleOver = ()=>{
this.setState({
isOver: true
})
}
<Tick
onClick={()=>{this.handleClick}}
clickOver={()=>{this.handleOver}} />