javascript - Redux- 表单 : get and show all values of a wizard form before submit

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，他提供了一个工作示例。