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

我正在使用，并试图在用户单击submit时获取表单值

。如您所见，有提交功能：

• 提交
• 论成功
• 不合格

从不调用

onsubmitsuccess

和

onSubmitFail

<调用了code>onSubmit，但没有参数

我只想得到表单值，这样我就可以将它们发布到API

我该怎么做

编辑（代码）

AutoFormInternal.js

类自动表单内部扩展组件{
render（）{
让{
组件工厂，
领域，
字段元数据，
布局，
手推，
提交
}=这是道具；
让model=this.props.values；
让fieldMetadataEvaluated=metadataEvaluator.evaluate（fieldMetadata，模型，，，字段）；
让groupComponent=componentFactory.buildGroupComponent({
组件：layout.component，
布局：布局，
字段：fieldMetadataEvaluated，
组件工厂：组件工厂
});
返回(
{groupComponent}
提交
取消
)
}
}
AutoFormInternal.propTypes={
字段：PropTypes.object.isRequired，
handleSubmit:PropTypes.func.isRequired，
resetForm:PropTypes.func.isRequired，
提交：PropTypes.bool.isRequired，
componentFactory:PropTypes.object.isRequired，
实体：PropTypes.object.isRequired，
布局：PropTypes.object
};
导出默认reduxForm({
表格：“简单”
})（自动形成内部）；

AutoForm.js

类自动表单扩展组件{
render（）{
让{entity，layout}=metadataProvider.getEntityAndLayout（this.props.schema，this.props.entityName，this.props.layoutName）；
让componentFactory=this.props.componentFactory；
让fieldMetadata=metadataProvider.getFields（this.props.schema，entity，layout，f=>{
f、 componentFactory=componentFactory；
});
let fields=metadataProvider.getReduxFormFields（fieldMetadata）；
让验证=（值）=>{
返回metadataValidator.validate（fieldMetadata，值）；
}
返回console.log（'submit'）}
onSubmitSuccess={（）=>console.log（'submitsuccess'）}
onSubmitFail={（）=>console.log（'submitfail'）}
/>
}
}
AutoForm.propTypes={
componentFactory:PropTypes.object.isRequired，
架构：PropTypes.object.isRequired，
entityName:PropTypes.string.isRequired，
layoutName:PropTypes.string.isRequired
};
导出默认自动表单；

您应该将onSubmit函数引用作为参数传递给表单的handleSubmit方法：

。注意，这里没有调用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);`

类自动表单内部扩展组件{
render（）{
让{
组件工厂，
领域，
字段元数据，
布局，
手推，
提交，
onSubmit/您应该将onSubmit函数引用作为参数传递给表单的handleSubmit方法：
。请注意，这里没有调用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);`

类自动表单内部扩展组件{
render（）{
让{
组件工厂，
领域，
字段元数据，
布局，
手推，
提交，
onSubmit//你能粘贴一些代码吗？特别是带有
handleSubmit
的部分。@Florent当然，等一下on@Florent就这么做了。谢谢你
onSubmit={values=>console.log（values）}
应该可以工作。如果不行，也许你应该在与表单交互后检查你的存储。你的字段可能没有正确绑定。你能粘贴一些代码吗？带有
handleSubmit
的部分具体地说。@Florent确定，请稍候on@Florent就这么做了。谢谢你
onSubmit={values=>console.log（values）}
应该可以工作。如果不行，您可能应该在与表单交互后检查您的存储。您的字段可能没有正确绑定。
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')}
         />