1

Redux-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;
4

1 に答える 1

5

フォームの handleSubmit メソッドへの onSubmit 関数参照をパラメーターとして渡す必要があります<form onSubmit={handleSubmit(onSubmit)}>。ここでは onSubmit 関数参照が呼び出されていないことに注意してください。フォーム送信の「コールバック」として提供しています。

フォームが送信されると、フォーム全体の値をオブジェクトとして 1 つのパラメーターを取る onSubmit 関数を呼び出す必要があります。

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')}
         />
于 2016-04-27T18:40:18.323 に答える