如何在Redux-Form的Submit事件上獲取表單值？

Question

我正在使用Redux-Form，並且試圖在用戶單擊“提交”時獲取表單值。

這些是外在形式的道具 。 如您所見，有提交功能：

• 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函數引用，您將其作為表單提交的“回調”提供。

現在，提交表單后，它應該調用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')}
         />