才入门时喜欢犯的错误
//构造器中定义组件状态
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

//手动修改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>

下面介绍一种更优雅的写法,嘿嘿~
利用箭头函数的特性this会自动绑定上下文。

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