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

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))

在这里查看更多

另外，如果您使用的是v6，则应在需要时查看shouldAsyncValidate函数以运行异步验证。 官方文档