Question

我正在使用redux-form来构建多页表单。

我有一个多“页面”表单。我的父表单初始化如下：

Parents = reduxForm({
    form: 'my-form',
    enableReinitialize: true,
    destroyOnUnmount: false,
})(Parents);

多个组件/页面显示如下：

{(step === 1) && <Intro onSubmit={this.handleSubmit} loading={submitting}/>}
{(step === 2) && <Motifs onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}
{(step === 3) && <Fichiers onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}
{(step === 4) && <Confirmation onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}
{(step === 5) && <Terminee onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}

this.handleSubmit是一个调用this.props.handleSubmit()并在服务器响应http 200时添加或删除1的功能。

在组件<Motifs>上，例如我初始化redux-form，如下所示：

Motifs = reduxForm({
    form: 'my-form',
    destroyOnUnmount: false,
    validate: validateMotifs // validation function
})(Motifs);

对于我的每个表单组件/页面，我都有一些上一个/下一个按钮，如下所示： <NavFormButton loading={loading} handleSubmit={handleSubmit} onSubmit={onSubmit}/>

当我点击下一步时，我想验证并提交表格。它正在发挥作用。但是，当我前一步时，我只想提交数据，以便保存但不想验证，因为用户可能没有填写所有字段。

我该怎么办？我是否遵循了良好的道路？

很难理解如何正确地做到这一点......谢谢。

Answer 1

首先，您可以尝试使用当前值重新初始化表单，提交然后转到上一个表单。

dispatch(initialize('my-form', newInitialValues))

查看更多here

此外，如果您使用的是v6，那么您应该查看shouldAsyncValidate函数以在需要时运行异步验证。官方docs

Redux-form - 按需验证 - 向导表单

1 个答案: