javascript - React中组件绑定this

问题描述

问 题

<button onClick={this.handleEvent}>    //这里的this是toggle组件 为什么还需要在组件里绑定这个函数的this 
  {this.state.isToggleOn === true ? 'on' : 'off'}
</button>

想不明白这里的this绑定

解决方案

因为在class中声明函数，并不会自动绑定this对象

所以，你在onClick={this.handleEvent}的时候，分解成两步你就懂了：

let handleEvent = this.handleEvent;
...onClick={handleEvent}...

所以，onClick调用的时候，handleEvent中的this会是undefined（根据文档）

所以，你需要bind一下, 那么里面的this就是当前组件啦。

还有一种方便的写法，就是用箭头函数声明：

handleEvent = (e)=>{

}

render(){
  ...onClick={this.handleEvent}...
}

这篇关于javascript - React中组件绑定this的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！