Question

我一直在转动轮子一段时间，试图找出完成所有这些的最佳方法。这是我的情况：

我正在使用React Router和Redux Form的混合来创建登录/创建帐户页面。

export default (
  <Route path='/' component={App}>
    <IndexRoute component={Signup} />
    <Route path='signup_verify' component={SignupVerify} />
  </Route>    
);

当您加载主页时，它会显示创建帐户的字段

我使用React Form来验证字段，一旦一切正常，我就

onSubmit() {
  this.context.router.push('/signup_verify')
}

因此将它们推送到向导的下一页和最后一页。在第二页中，我有一个禁用的输入，我想用他们在前一个表单中给我的名字填充。 我是如何获得用户提交的名称出现在第二页？

React Form谈到使用装饰器：

@reduxForm({
  form: 'myForm'
})

http://redux-form.com/5.2.4/#/api/get-values?_k=eo04uv

https://github.com/erikras/redux-form/issues/260#issuecomment-155852315

我设置我的环境以便能够使用装饰器但是当我尝试在上面的几行上实现相同的代码时我发出错误说：

Warning.js：45警告：propType失败：提供给fields的{{1}}类型的道具object无效，需要一个数组。检查ReduxForm(Signup)的render方法.warning @ warning.js：45 getValues.js：59

和

未捕获的TypeError：fields.reduce不是函数

我的第一页，屏幕截图来自，非常类似于 WizardFormFirstPage.js （http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56）。 WizardFormSecondPage如何在禁用的输入中显示WizardFormFirstPage中的数据？

我知道这很多，非常感谢任何帮助！另外，任何以另一种方式做这种反馈的反馈都会很棒，或者对我当前的方法赞不绝口。

Answer 1

在destroyOnUnmount: false装饰器中设置选项reduxForm()。

其次，您应该使用react-redux包。它有一个名为connect()的函数，它允许你将状态传递给道具。

const mapStateToProps = (state) => {
  return {
    name: state.form.myForm.name,
    email: state.form.myForm.email,
    company: state.form.myForm.company
  }
};

const SignupVerify = connect(mapStateToProps)(SignupVerify)

将SignupVerify替换为您的组件名称。

state.form.myForm会根据您为reduxForm()

输入的属性而更改

Redux usage with React

Redux-Form wizard example

Answer 2

在几个控制台日志之后，我发现第一页的输入值将存活到下一页IF：

1）导出第一页上的所有字段，或至少导出您要访问的字段。 IE：

导出const字段= [＆＃39;名称＆＃39;，＆＃39;电子邮件＆＃39;，＆＃39;公司＆＃39;];

2）指定destroyOnUnmount：false标志以保留表单组件卸载中的表单数据。

3）从向导中删除下一页中的道具。 IE： const {fields：{name}，handleSubmit} = this.props;

然后您将在thing.value下访问它。 IE：

name.value将等于我在第一页上输入的名称。

了解更多信息的文档：http://redux-form.com/5.2.4/#/examples/wizard?_k=y8mg56

使用Redux表单和React路由器

2 个答案: