我当时正在使用react.js应用程序,最初使用的是箭头功能,但是出于好奇,我决定尝试使用正常功能,但正常功能无效。我认为他们俩都应该输出相同的内容,这是怎么回事?
handleChange = event => this.setState({init: event.target.value})
handleChange(event){
this.setState({init: event.target.value})
}
答案 0 :(得分:6)
箭头功能和普通功能不相同。
这里是区别:
箭头功能没有具有自己的绑定this
,因此您的this.setState
引用了YourClass.setState
。
使用常规功能,您需要将其绑定到类上以获得Class的this
引用。因此,当您呼叫this.setState
时,实际上是指YourFunction.setState()
。
示例代码
class FancyComponent extends Component {
handleChange(event) {
this.setState({ event }) // `this` is instance of handleChange
}
handleChange = (event) => {
this.setState({ event }) // `this` is instance of FancyComponent
}
}