gpt4 book ai didi

javascript - Redux 表单 - 您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 Prop 传递

转载 作者:行者123 更新时间:2023-11-29 10:31:23 27 4
gpt4 key购买 nike

我想创建一个简单的表单,它接受一个电子邮件地址,然后将其添加到我们的数据库中。我选择了 React Forms,因为它促进了整个开发过程并减少了时间。

但是,当我尝试 POST 我的表单时出现此错误:未捕获错误:您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 Prop 传递

这是我的 AddUserForm.js:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const AddUserForm = ({ handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<div>
<Field name="email" component="input" type="email" />
</div>
<button type="submit">Bjud in</button>
</form>
)
}
export default reduxForm({
form: 'addUser'
})(AddUserForm)

这是我的addUserAction:

import axios from 'axios'
import settings from '../settings'

axios.defaults.baseURL = settings.hostname

export const addUser = email => {
return dispatch => {
return axios.post('/invite', { email: email }).then(response => {
console.log(response)
})
}
}

这是我的 AddUserContainer.js:

import React, { Component } from 'react'
import { addUser } from '../../actions/addUserAction'
import AddUserForm from './Views/AddUserForm'
import { connect } from 'react-redux'

class AddUserContainer extends Component {
submit(values) {
console.log(values)
this.props.addUser(values)
}

render() {
return (
<div>
<h1>Bjud in användare</h1>
<AddUserForm onSubmit={this.submit.bind(this)} />
</div>
)
}
}

function mapStateToProps(state) {
return { user: state.user }
}

export default connect(mapStateToProps, { addUser })(AddUserContainer)

感谢阅读!

最佳答案

onSubmit 未定义 因为它未声明。按照路径:

注意:values 变量保存字段数据,在您的情况下它将保存键入的电子邮件。

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

const AddUserForm = ({ handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<div>
<Field name="email" component="input" type="email" />
</div>
<button type="submit">Bjud in</button>
</form>
)
}

const onSubmit = (values, dispatch) => {
dispatch( // your submit action // );
};

export default connect()(reduxForm({
form: 'addUser',
onSubmit,
})(AddUserForm));

关于javascript - Redux 表单 - 您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 Prop 传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45322860/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com