今天用React做一个小demo时出现了个这样的问题(请自动忽略文中配色,我知道不好看)
// 输入内容
handleInputChange(event) {
this.setState({
inputContent: event.target.value
})
}
效果图也会出来,但是当点击输入框时,就会报错
原因就是:到了方法handleInputChange 里面的this 就不是组件的this了,我们有两种解决方法:
- 手动绑定
.this.handleInputChange = this.handleInputChange.bind(this);
- 利用箭头函数来写方法;如下图所示修改内容
// 输入内容
// handleInputChange(event) {
// this.setState({
// inputContent: event.target.value
// })
// }
handleInputChange = (event) => {
this.setState({inputContent:event.target.value})
}
可以看到也可以成功运行,得出我们想要的结果
在React中,通过props将类的原型方法传给子组件,传统的写法就是
. this.handleInputChange = this.handleInputChange.bind(this);
不然执行方法时会找不到this