Javascript Redux表单奇怪的箭头函数语法

因此，我遵循以下原则，并偶然发现：

handleSubmit=（值）=>{…}

直觉上，我认为它可以编译成这样简单的东西：

函数handleSubmit（值）{…}

但事实并非如此。实际上，它是这样编译的：

handleSubmit=函数handleSubmit（值）{…}

这使得我的JSlint变得疯狂（
错误解析错误：意外的令牌=
）。我尝试了很多方法来重写它，包括使用编译过的JS，但是当我这么做的时候，我得到了一个错误，因为无法访问道具

有人能给我解释一下发生了什么事吗

下面是我使用编译后的JS时的stacktrace：

Uncaught TypeError: Cannot read property 'props' of undefined
    at handleSubmit (create.js:17)
    at doSubmit (handleSubmit.js:42)
    at handleSubmit.js:107
    at handleSubmit (handleSubmit.js:110)
    at Form.submit (reduxForm.js:540)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:70)
    at executeDispatch (EventPluginUtils.js:85)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
    at executeDispatchesAndRelease (EventPluginHub.js:43)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)

以下是我的Eslint配置的要点：

我在链接中看到handleSubmit函数是这样传递的：

 <ContactForm onSubmit={this.handleSubmit} />

您只传递函数定义，它将从ContactForm组件内部调用。发生这种情况时，“this”关键字的作用域将不在您声明ContactForm的组件（本例中为ContactPage）上，因此您将无法访问这些道具

使用箭头符号

handleSubmit = (values) => { ... }

解决此问题是因为您传递的不是函数定义，而是它的实例，因为这将使用实例函数创建类属性。由于箭头函数保留“this”关键字的作用域，因此当调用handleSubmit时，“this”的作用域将正确，并且您可以访问定义回调的组件的道具

请注意，将处理程序声明为类方法而不是属性，并在将其传递给ContactForm时将作用域绑定到它，也可以实现同样的效果：

class ContactPage extends React.Component {
  handleSubmit(values) {
    // Do something with the form values
    console.log(values);
  }
  render() {
    return (
      <ContactForm onSubmit={this.handleSubmit.bind(this)} />
    );
  }
}

class ContactPage扩展了React.Component{
handleSubmit（值）{
//对表单值执行一些操作
console.log（值）；
}
render（）{
返回(
);
}
}
您能确切地说明您收到了哪些警告或错误吗？也发布您的lint文件配置。可能会重复“直觉上我认为它编译为”的赋值编译为声明，这与直觉是背道而驰的。在编译后的代码上运行JSLint是毫无意义的。谢谢您的解释。我知道箭头函数中的
与此
有些不同，但我不太理解其中的含义。我还发现了这个线程，它稍微解释了这个问题，我了解到我需要一个Babel插件来可靠地完成这项工作（它在我的机器上工作，而不是在Travis或我的同事的机器上）。但由于它是实验性的，我想我现在还是坚持传递
.bind（this）
。谢谢！
class ContactPage extends React.Component {
  handleSubmit(values) {
    // Do something with the form values
    console.log(values);
  }
  render() {
    return (
      <ContactForm onSubmit={this.handleSubmit.bind(this)} />
    );
  }
}