Question

我是初学者，所以在提交表单之前，我在访问和显示向导表单中的所有值时遇到了一些麻烦。我试图创建一个＆＃34;预览组件＆＃34;允许用户在提交之前检查所有值。这是我的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)

我得到＆＃34; familyFlag未定义＆＃34; （根据我的理解，这不应该是）但我无法弄清楚如何使它可用。仅供参考，输入familyFlag存在于表单的第一步。

如何从向导表单中获取所有值并显示它？帮助表示赞赏。

Answer 1

您尚未在familyFlag组件

中定义WizardFormPreview

你需要从像

这样的道具中获取它

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

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

values

感谢github上的@danielrob，他提供了一个有效的例子。

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

2 个答案: