Redux 表单 - 您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递 [英] Redux Form - You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

问题描述

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

但是，当我尝试发布表单时，我收到此错误:未捕获错误:您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递

这是我的 AddUserForm.js:

从 'react' 导入 Reactimport { Field, reduxForm } from 'redux-form'const AddUserForm = ({ handleSubmit }) =>{返回 (<form onSubmit={handleSubmit}><div><Field name="email" component="input" type="email"/>

<button type="submit">Bjud in</button></表单>)}导出默认 reduxForm({形式:'添加用户'})(添加用户表单)

这是我的addUserAction:

从 'axios' 导入 axios从../settings"导入设置axios.defaults.baseURL = settings.hostname导出 const addUser = 电子邮件 =>{返回调度 =>{return axios.post('/invite', { email: email }).then(response => {控制台日志(响应)})}}

这是我的 AddUserContainer.js:

import React, { Component } from 'react'从 '../../actions/addUserAction' 导入 { addUser }从 './Views/AddUserForm' 导入 AddUserForm从'react-redux'导入{连接}类 AddUserContainer 扩展组件 {提交(值){控制台日志(值)this.props.addUser(values)}使成为() {返回 (<div><h1>Bjud in användare</h1><AddUserForm onSubmit={this.submit.bind(this)}/>

)}}函数 mapStateToProps(state) {返回 { 用户:state.user }}导出默认连接(mapStateToProps，{ addUser })(AddUserContainer)

感谢阅读！

解决方案

onSubmit not defined 因为它没有声明.按照路径:

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

从'react'导入React；import { Field, reduxForm } from 'redux-form';从'react-redux'导入{连接}；const AddUserForm = ({ handleSubmit }) =>{返回 (<form onSubmit={handleSubmit}><div><Field name="email" component="input" type="email"/>

<button type="submit">Bjud in</button></表单>)}const onSubmit = (values, dispatch) =>{dispatch(//你的提交动作//);};导出默认连接()(reduxForm({形式:'添加用户'，提交时，})(AddUserForm));

I want to create a simple form that takes in an email adress and later adds it to our database. I went with React Forms, because it facilitates the whole development process and reduces the amount of time.

However, when I'm trying to POST my form I'm getting this error: Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Here's my 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)

Here's my 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)
    })
  }
}

And here's my 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)

Thanks for reading!

解决方案

onSubmit is not defined because it's not declared. Follow the path:

Note: values variable holds fields data, in your case it will hold typed email.

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));

这篇关于Redux 表单 - 您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！