Question

我正在使用redux-form而我无法使onSubmit功能正常工作。

编辑：我的问题是该函数没有被调用，我把调试器放在onSubmit上它并没有到达那里。这是我的表格：

class userForm extends Component {
    onSubmit(values) { // do here something }
    render() {
        const { handleSubmit } = this.props;
        return <form onSubmit={handleSubmit(this.onSubmit)}>
            <Field name='id'
                component={TextField}
                label='id'/>
            <Field name='name'
                component={TextField}
                label='name' />
            <button type='submit'>Submit</button>
        </form>
    }
}

export default reduxForm({
    form: 'userForm'
})(userForm);

但它永远不会进入onSubmit方法。

我做错了什么？

Answer 1

您只需要在提交后添加 .bind 关键字，

class userForm extends Component {
onSubmit(values) { // do here something }
render() {
    const { handleSubmit } = this.props;
    return <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <Field name='id'
            component={TextField}
            label='id'/>
        <Field name='name'
            component={TextField}
            label='name' />
        <button type='submit'>Submit</button>
    </form>
    }
}

export default reduxForm({
    form: 'userForm'
})(userForm);

Answer 2

这是我使用的模式的编辑版本。

请注意使用Redirect "/news.aspx" "http://example.com/index.php?category_name=news"关键字。

通常我使用redux来管理状态，并且还会在函数bind中使用一个动作。但这应该让你走上正轨。

handleFormSubmit

redux-form - onSubmit不起作用

2 个答案: