reactreact中的this

class App extends React.Component{
  constructor(props) {
    super(props);
    // 为了使this指向当前类
    // this.handleClick = this.handleClick.bind(this);
  }
  
  //测试函数
  handler() {
    console.log(`handler 被调用，this指向:`,this);
  }
 
  render(){
    return(
        <div>
          <h1>hello World</h1>
            <label htmlFor = 'btn'>单击打印函数handler中this的指向</label>
            <input id = "btn" type="button" value = '单击' onClick = {this.handler}/>
       </div>        
   )
 }
} 

输出“handler 被调用，this指向 : undefined”，因为这里的this只是为click事件指定回调函数，只有在事件触发是才调用这个函数，此时在click合成函数里无法明确是谁调用了这个函数(所以this具不确定性为undefined，此时使用this.setState会报错)

自动绑定和手动绑定

• React.createClass可以自动绑定所以方法的this到组件实例，其他ES6类语法不会绑定this环境，所以需要手动绑定
• 所以我们通常在constructor中绑定方法的this指向

总结

• react组件生命周期函数里this指向组件实例
• 自定义组件函数中的this会因为调用者不同而不同

• 为了在组件函数中获取组件实例，需要手动绑定this到组件实例

  • 在constructor函数里 this.handleClick = this.handleClick.bind(this);
  • 在绑定事件时绑定this <div onClick = {this.handler.bind(this)} >
  • 使用箭头函数定义方法 <div onClick = {() => this.handler()} >
  • 使用ES7 的::