如何在Redux-Form的提交事件中获取表单值？

Question

我正在使用Redux-Form，我正在尝试在用户点击提交时获取表单值。

These are the outer form props。如您所见，有提交功能：

• 的onSubmit
• onSubmitSuccess
• onSubmitFail

永远不会调用

onSubmitSucess和onSubmitFail。 onSubmit被调用，但无参数。

我想要的只是获取表单值，以便将它们发布到API。

我该怎么做？

编辑（代码）

AutoFormInternal.js

class AutoFormInternal extends Component {

    render() {

        let {
            componentFactory,
            fields,
            fieldMetadata,
            layout,
            handleSubmit,
            submitting
        } = this.props;

        let model = this.props.values;
        let fieldMetadataEvaluated = metadataEvaluator.evaluate(fieldMetadata, model, '', fields);

        let groupComponent = componentFactory.buildGroupComponent({
            component: layout.component,
            layout: layout,
            fields: fieldMetadataEvaluated,
            componentFactory: componentFactory
        });

        return (
            <div className="meta-form">
                <form onSubmit={handleSubmit}>
                    { groupComponent }
                    <ButtonToolbar>
                        <Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
                        <Button disabled={submitting}>Cancel</Button>
                    </ButtonToolbar>
                </form>
            </div>
        )
    }
}

AutoFormInternal.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    componentFactory: PropTypes.object.isRequired,
    entity: PropTypes.object.isRequired,
    layout: PropTypes.object
};

export default reduxForm({
    form: 'simple'
})(AutoFormInternal);

AutoForm.js

class AutoForm extends Component {

    render() {

        let {entity, layout} = metadataProvider.getEntityAndLayout(this.props.schema, this.props.entityName, this.props.layoutName);
        let componentFactory = this.props.componentFactory;
        let fieldMetadata = metadataProvider.getFields(this.props.schema, entity, layout, f => {
            f.componentFactory = componentFactory;
        });
        let fields = metadataProvider.getReduxFormFields(fieldMetadata);
        let validate = (values) => {
            return metadataValidator.validate(fieldMetadata, values);
        }

        return <AutoFormInternal
            fields={fields}
            fieldMetadata={fieldMetadata}
            entity={entity}
            layout={layout}
            validate={validate}
            componentFactory={componentFactory}
            onSubmit={() => console.log('submit')}
            onSubmitSuccess={() => console.log('submit success')}
            onSubmitFail={() => console.log('submit fail')}
             />
    }

}

AutoForm.propTypes = {
    componentFactory: PropTypes.object.isRequired,
    schema: PropTypes.object.isRequired,
    entityName: PropTypes.string.isRequired,
    layoutName: PropTypes.string.isRequired
};

export default AutoForm;

Answer 1

您应该将onSubmit函数引用传递给表单的handleSubmit方法作为参数：<form onSubmit={handleSubmit(onSubmit)}>。请注意，此处未调用onSubmit函数引用，您将其作为＆＃34;回调＆＃34;表格提交。

现在提交表单时，它应该调用onSubmit函数，该函数应该取1个参数，整个表单的值作为对象。

class AutoFormInternal extends Component {

render() {

    let {
        componentFactory,
        fields,
        fieldMetadata,
        layout,
        handleSubmit,
        submitting,
        onSubmit // <-- You need to reference this function passed from the wrapper component in order to pass it to redux-form's provided handleSubmit function
    } = this.props;

    ... *snip* ...

    return (
        <div className="meta-form">
            <form onSubmit={handleSubmit(onSubmit)}> // <-- Here's where we pass onSubmit to redux-form's handleSubmit
                { groupComponent }
                <ButtonToolbar>
                    <Button type="submit" bsStyle="primary" disabled={submitting}>Submit</Button>
                    <Button disabled={submitting}>Cancel</Button>
                </ButtonToolbar>
            </form>
        </div>
    )
}
}

AutoFormInternal.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    componentFactory: PropTypes.object.isRequired,
    entity: PropTypes.object.isRequired,
    layout: PropTypes.object
};

export default reduxForm({
    form: 'simple'
})(AutoFormInternal);`

... *snip* ...

return <AutoFormInternal
        fields={fields}
        fieldMetadata={fieldMetadata}
        entity={entity}
        layout={layout}
        validate={validate}
        componentFactory={componentFactory}
        onSubmit={(formValues) => console.log(formValues)} // <-- formValues should be now be populated when the form is submitted
        onSubmitSuccess={() => console.log('submit success')}
        onSubmitFail={() => console.log('submit fail')}
         />