Redux-form

Question

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

我有多个 "page" 表格。我的父表单是这样初始化的：

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

并且多个 component/page 有条件地显示如下：

{(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);

对于我的每个表单 components/pages，我都有一些 previous/next 按钮，如下所示： <NavFormButton loading={loading} handleSubmit={handleSubmit} onSubmit={onSubmit}/>

当我单击“下一步”时，我想验证并提交表单。它的工作。但是当我往前走时，我只想提交数据以便保存它们，但不想验证，因为用户可能没有填写所有字段。

我该怎么办？我走的是好的路吗？

很难理解如何正确执行此操作...谢谢。

Answer 1

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

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

查看更多here

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

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

Redux-form - Validate on demand - wizard form

javascript

forms

wizard

reactjs