Как я могу получить значения формы в событии отправки Redux-Form?

Я использую 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;

person André Pena    schedule 26.04.2016    source источник
comment
Можете ли вы вставить код? Часть с handleSubmit в частности.   -  person Florent    schedule 26.04.2016
comment
@ Флоран, конечно, подожди   -  person André Pena    schedule 26.04.2016
comment
@ Флоран Только что сделал это. Спасибо   -  person André Pena    schedule 26.04.2016
comment
onSubmit={values => console.log(values)} должно работать. Если нет, возможно, вам следует проверить свой магазин после взаимодействия с формой. Ваши поля могут быть неправильно связаны.   -  person Florent    schedule 26.04.2016


Ответы (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')}
         />
person hsrob    schedule 27.04.2016