Redux-form：在提交之前获取并显示向导表单的所有值

Question

我是初学者，因此在提交表单之前访问和显示向导表单中的所有值时遇到了一些问题。我正在尝试创建一个“预览组件”，让用户在提交之前检查所有值。这是我的 WIzardFormPreview 组件

import React from 'react';
import {Field, reduxForm} from 'redux-form';
import { Values } from 'redux-form-website-template';
import {connect} from "react-redux";
import validate from '../middleware/validate';

let WizardFormPreview = props => {

const {handleSubmit, pristine, previousPage, submitting} = props;

return (
    <form onSubmit={handleSubmit} className="form-horizontal">
        <div className="step-3">

            <div>{familyFlag}</div>
            <div>
                <button type="button" className="previous" onClick={previousPage}>
                    Previous
                </button>
                <button type="submit" disabled={pristine || submitting}>Submit</button>
            </div>
        </div>
    </form>
  );
};
export default reduxForm({
form: 'wizard', 
destroyOnUnmount: false, 
forceUnregisterOnUnmount: true, 
validate,
})(WizardFormPreview);

WizardFormPreview = connect(
state => ({
    values: {
        family : state.form.wizard.values.familyFlag
    }
})
)(WizardFormPreview)

我收到“familyFlag is not defined”（据我了解，这不应该是），但我不知道如何使其可用。仅供参考，输入 familyFlag 存在于表单的第一步中。

如何从向导表单中获取所有值并显示它？感谢您的帮助。

Answer 1

redux-form 有一个选择器getFormValues，它返回一个包含整个表单值的对象。问题是，根据this bug report，values 是一个保留名称。我一改名，它就起作用了。但后来，它也可以使用保留字values。它是否是一个错误 - 仍然不确定。我在下面发布了我的完整代码（它使用values），它可能会对某人有所帮助。

import React from 'react';
import {Field, reduxForm, values, getFormValues } from 'redux-form';
import {connect} from "react-redux";
import validate from '../middleware/validate';

const FetchValues = connect(state => ({
values: getFormValues('wizard')(state),
}))(({ values }) =>

<div>
    <p>Check if everything is alright.</p>
        <div className="row">
            <div className="col-xs-12">
                <h6>Your Name</h6>
            </div>
            <div className="col-xs-12">
                <p>{values.name}</p>
            </div>
        </div>

    <div className="row">
        <div className="col-xs-12">
            <h6>Are you part of a family?</h6>
        </div>
        <div className="col-xs-12">
            <p>{values.familyFlag}</p>
        </div>
    </div>
</div>)


let WizardFormPreview = (props) => {

const {handleSubmit, pristine, previousPage, submitting} = props;

return (
    <form onSubmit={handleSubmit} className="form-horizontal">
        <div className="step-3">

            <FetchValues/>
            <div>
                <button type="button" className="previous" onClick={previousPage}>
                    Previous
                </button>
                <button type="submit" disabled={pristine || submitting}>Submit</button>
            </div>
        </div>
    </form>
);
};

export default reduxForm({
form: 'wizard', 
destroyOnUnmount: false,
forceUnregisterOnUnmount: true, 
validate,
})(WizardFormPreview);

感谢 github 上的 @danielrob，他提供了一个工作示例。

Answer 2

您还没有在WizardFormPreview 组件中定义familyFlag

你需要从像这样的道具中获取它

let WizardFormPreview = props => {

const {handleSubmit, pristine, previousPage, values, submitting} = props;
const {family: familyFlag} = values;

return (
    <form onSubmit={handleSubmit} className="form-horizontal">
        <div className="step-3">

            <div>{familyFlag}</div>
            <div>
                <button type="button" className="previous" onClick={previousPage}>
                    Previous
                </button>
                <button type="submit" disabled={pristine || submitting}>Submit</button>
            </div>
        </div>
    </form>
  );
};