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

Question

我是初学者，因此在提交表单之前访问和显示向导表单中的所有值时遇到了一些问题。我正在尝试创建一个 "preview component" 让用户在 s/he 点击提交之前检查所有值。这是我的 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

您尚未在 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>
  );
};

Answer 2

redux-form 有一个选择器 getFormValues return 一个包含整个表单值的对象。问题是，根据 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，他提供了一个工作示例。

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

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

javascript

forms

reactjs

redux-form