如果有多个字段,则Redux-Form将不会提交

时间:2019-01-08 07:10:33

标签: redux-form

当我有多个字段时,为什么我的redux表单不提交?

如果我有多个字段,那么表单上的onSubmit将不会运行。

以下代码将显示警报:

//@flow
import * as React from 'react';
import {Field, reduxForm, Form} from 'redux-form';


class CustomerPage2 extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {

        let submit = () => alert("show me the money")

        return (
                <Form id="myform" onSubmit={submit} >
                        <Field
                            label={'asdf'}
                            className={'input'}
                            id='1'
                            name={'salutation'}
                            mandatory={true}
                            component='input'
                        />
                        <Field
                            label={'asdf2'}
                            className={'input'}
                            id='2'
                            name={'first_name'}
                            mandatory={true}
                            component='input'
                        />
                </Form>
        );
    }
}

export default reduxForm({
    form: 'customerRegistration',
})(CustomerPage2)

但是,如果我删除其中一个字段,警报将弹出:

render(){

let submit = () => alert("show me the money")

return (
        <Form id="myform" onSubmit={submit} >
                <Field
                    label={'asdf'}
                    className={'input'}
                    id='1'
                    name={'salutation'}
                    mandatory={true}
                    component='input'
                />
        </Form>
);

}

我还创建了一个小提琴,您可以亲眼看到它:

https://jsfiddle.net/036ur33k/150/

只需删除其中一个字段,您就会明白我的意思。

1 个答案:

答案 0 :(得分:1)

我认为您忘记在onSubmit事件中使用handleSubmit函数(redux形式将其添加到组件props上)。

我修改了您的小提琴,检查它是否是您所需要的。

https://jsfiddle.net/036ur33k/173/