我开始阅读Reactjs并面对一个示例问题。在构造函数中将添加
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
但我不明白，它们扮演什么角色，为什么需要它们？如果将方法更改为箭头函数，则代码将起作用。谢谢。
完整示例：
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
因为该函数将从全局上下文中调用，所以this不会引用您的类实例，因此它将undefined为什么？因为当发生change事件时，React 会像这样简单地调用你的方法youHandler(event)，你可以看到该函数不会有this值，因为它是从全局上下文调用的。我给你一个纯javascript的例子(在反应范围之外(：
<input id="myInput" type="text" onChange="myFunction()">
<script>
"use strict";
function myFunction() {
console.log(this); // this is undefined here
}
</script>
所以你需要用bind方法来设置this的值，它将等于当前的类实例
此外，箭头函数没有自己的this;当你创建一个箭头函数时，会使用封闭词法上下文的这个值。你可以在这里阅读文档所以如果你写：
handleChange = event => {
this.setState({value: event.target.value});
}
你必须问自己以下问题：创建handleChange函数时this的价值是什么？在这里，它将等于NameForm类的当前实例，这实际上是您想要的。
它们之间没有区别。
但是，这是箭头函数的建议类字段的一部分，它不是 ES6 功能。
看看其他答案。