Redux形式 - 按需验证 - 向导形式

问题描述：

我正在使用redux-form构建多页表单。Redux形式 - 按需验证 - 向导形式

我有一个多“页”的形式。我的父窗体是初始化这样的：

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

和多组份/页显示conditionaly这样的：

{(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()和添加或删除1步骤如果服务器的功能回应http 200.

在组件<Motifs>例如我初始化像这样的redux-form：

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

而且我的每个表单组件/页的我有一些按钮，一个/下一个这样的： <NavFormButton loading={loading} handleSubmit={handleSubmit} onSubmit={onSubmit}/>

当我点击下一步我要验证并提交表单。它正在工作。但是，当我去以前我只是想提交的数据，所以他们被保存，但不想验证，因为用户可能没有填写所有的领域。

我该怎么办？我遵循好的道路吗？

有很多麻烦了解如何正确地做到这一点...谢谢。

答

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

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

查看更多here

此外，如果你使用的是V6，那么你应该看看shouldAsyncValidate功能，当你需要它来运行异步验证。官方docs

Redux形式 - 按需验证 - 向导形式

相关推荐