Question

因此，基本上，我试图遵循以下示例并将其实现到我的项目中。但是我很困惑，如您所见，当提交WizardFormThirdPage.js时，调用了函数showResults。当我查看showResults.js时，它已经传入了值，但是我不知道该值是从哪里来的或表单数据的值是如何获得的，有人可以向我解释吗？

https://codesandbox.io/s/0Qzz3843

Answer 1

在所有三个WizardForm页面中，onSubmit不是由React提供的，而是由Redux格式覆盖的功能：https://redux-form.com/8.1.0/docs/api/reduxform.md/#-code-onsubmit-function-code-optional-。它提供了几个参数，其中values是wizard形式的所有值。

因此，在第1和第2页中，onSubmit的处理程序是函数nextPage，它忽略了所有参数，而对于第3页，处理程序showResults仅采用参数values。

您可以通过修改功能showResults：

export default (async function showResults(...args) {
  await sleep(500); // simulate server latency
  window.alert(JSON.stringify(args));
});

将显示所有参数，如上面的链接所示。

Answer 2

如果您具有Redux开发工具，则可以看到属于同一表单的所有值（如本示例中的向导表单一样）都已添加到wizard.values属性。该属性的get返回到handleSubmit并传递给showResults。它写为

<WizardForm onSubmit={showResults} />

并且showResults获得该values属性，也可以写成

<WizardForm onSubmit={(values)=>showResults(values)} />

也许这是更清晰的方法。

并猜测handleSubmit（来自redux-form）从redux存储中获取值并执行类似的操作

handleSubmit=(someValues)=>{
  // some your property that handles values
  this.props.yourOnSubmit(someValues);
}

handleSubmit就像使用带有values参数的回调函数一样使用onSubmit并使用values进行调用。

Redux表单，VALUES来自何处？

2 个答案: