//构造器中定义组件状态
constructor(){
  super()
  this.state={
    value:22
  }
}
// 原型方法
handle(){
  console.log(this.state.value);
}
render(){
  return(
  	  <p>
  	    我组件<button onClick={this.handle}>按钮</button>
  	    组件中的状态值:{this.state.value}
  	  </p>
  	) 
}
/*点击按钮 Cannot read property 'state' of undefined */
// jsx中的this并没有指向类，所以报错

//手动修改this指向，但有弊端。每次点击按钮都会用bind创建新的函数，浪费内存。
<p>
  我组件<button onClick={this.handle.bind(this)}>按钮</button>
  组件中的状态值:{this.state.value}
</p>

我们可以在组件初始化事改变this的指向，这样只会返回一个函数
constructor(){
  super()
  this.state={
    value:22
  }
  //改变事件this指向
  this.handle = this.handle.bind(this); 
}
这样在render函数中就可以像之前那样写了，不会报错。
<p>
  我组件<button onClick={this.handle}>按钮</button>
  组件中的状态值:{this.state.value}
</p>

handle=() => {
  console.log(this.state.value);
}
<p>
  我组件<button onClick={this.handle}>按钮</button>
  组件中的状态值:{this.state.value}
</p>