将多个表单合并为一个问题,使用react和redux-form

时间:2017-11-01 17:15:26

标签: reactjs redux-form

在我的应用程序中,我有多个处理特定用例的表单: - 添加指针 - 添加ssl证书 - ......

这些表单是独立使用的,但有时需要将两个或多个表单合并为一个。

我已阅读向导示例(https://redux-form.com/7.1.2/examples/wizard/)并已将其应用于我的代码。当用作向导时,它一次成功运行,一次只能看到一个表单。

但是当两种形式需要同时可见时,我会遇到问题。将数据输入第二种形式时,redux-form使用第一种形式进行验证。

我希望我能够解释得很清楚。这里有一些伪代码:

<Wizard>
        <WizardStep
            title={formatMessage(messages.step1Title)}
            isActive
            step={1}
        >
            <DomainPointerFormContainer
                initialValues={{
                    pointer: pointer && pointer.pointer,
                    domain: application.domain
                }}
            />
        </WizardStep>

        <WizardStep
            title={formatMessage(messages.step2Title)}
            isActive
            step={2}
        >
            <SslCertificateFormContainer
                existingCertificates={existingCertificates}
                onSubmit={submitForm}
                submitLabel={formatMessage(messages.submitLabel)}
                submittingLabel={formatMessage(messages.submittingLabel)}
            />
        </WizardStep>
    </Wizard>

DomainPointerFormContainer如下所示:

import DomainPointerForm from 'Form/DomainPointerForm';
...
export default reduxForm({
    form: 'wizard',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
    enableReinitialize: true,
})(DomainPointerForm);

SslCertificateFormContainer如下所示:

import SslCertificateForm, { validate } from 'Form/SslCertificateForm';
...
export default reduxForm({
    form: 'wizard',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
    enableReinitialize: true,
    validate
})(SslCertificateForm);

validate函数看起来与redux-form示例非常相似,所以没什么特别的。

有没有办法让这项工作,或者我必须创建一个新的表单,结合两个单独的表单的内容,这会导致大量的重复......

0 个答案:

没有答案