Question

所以我跟随getting started guide for Redux Form，我偶然发现了这个：

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

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

function handleSubmit(values) { ... }

但事实并非如此。实际上，它编译为：

handleSubmit = function handleSubmit(values) { ... };

这让我的JSlint变得疯狂（error Parsing error: Unexpected token =）。我已经尝试了很多方法来重写这个，包括使用编译的JS，但是当我这样做时，我得到一个错误，因为无法访问道具。

有人可以向我解释发生了什么事吗？

当我使用编译的JS时，这是堆栈跟踪：

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配置的要点：

https://gist.github.com/webconsult/62bfa93054f261d92c186d39635f743c

Answer 1

我在链接中看到handleSubmit函数的传递方式如下：

 <ContactForm onSubmit={this.handleSubmit} />

所以，如果你使用符号

function handleSubmit(values) { ... }

您只传递函数定义，该函数定义将从ContactForm组件内部调用。当发生这种情况时，＆＃39;这个＆＃39;关键字不会限制在您声明ContactForm的组件上（本例中为ContactPage），因此您无法访问道具。

使用箭头符号

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

解决这个问题是因为你没有传递函数定义而是传递它的实例，因为这会创建一个带有instanced函数的类属性。由于箭头功能保持了这个＆＃39;这个＆＃39;关键字，当调用handleSubmit时，＆＃39;这个＆＃39;将被正确确定范围，您可以访问定义回调的组件的道具。

请注意，同样可以实现将处理程序声明为类方法而不是属性，并在将范围传递给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)} />
    );
  }
}

Redux形成奇怪的箭头函数语法

1 个答案: