7

我一直在旋转我的轮子一段时间，试图找出做这一切的最佳方法。这是我的情况：

我混合使用 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:45Warning: 失败的 propType:提供给fields的类型无效的 prop ，需要一个数组。检查.warning @warning.js:45 getValues.js:59的渲染方法objectReduxForm(Signup)Connect(ReduxForm(Signup))

和

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

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

我知道这很多，非常感谢任何帮助！此外，任何关于以另一种方式执行此操作的反馈都会很棒，或者对我目前的方法表示赞许。

4

2 回答 2

2

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 与 React 的使用

Redux-Form 向导示例

于 2016-10-20T20:29:45.367 回答
0

经过一些控制台日志后，我发现第一页的输入值将保留到下一页如果：

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

导出常量字段 = ['name', 'email', 'company'];

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

于 2016-05-26T14:12:48.810 回答