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 的::