Question

我开始阅读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>
        );
    }
   }

Answer 1

因为将从全局上下文中调用该函数，所以this将不会引用您的类实例，因此将是undefined为什么？因为当发生change事件时，React会像这样youHandler(event)那样简单地调用您的方法，因此您可以看到该函数将没有this值，因为它是从全局上下文中调用的。我给你一个纯JavaScript的示例（超出React作用域）：

<input id="myInput" type="text" onChange="myFunction()">

<script>
 "use strict";

 function myFunction() {
   console.log(this); // this is undefined here
 }
</script>

因此，您需要使用bind方法来设置this的值，该值将等于当前的类实例

此外，箭头功能没有自己的this；创建箭头函数时，将使用封闭词法上下文的this值。您可以阅读文档here，因此，如果您编写：

handleChange = event => {
   this.setState({value: event.target.value});
}

您必须问自己以下问题：创建this函数时handleChange的值是什么？在这里，它将等于NameForm类的当前实例，而这实际上就是您想要的。

Answer 2

它们之间没有区别。

但是，这是建议的箭头功能类字段的一部分，它不是ES6功能。

看看其他answer。

为什么在上面的示例中我需要“ bind（this）”

2 个答案: