Question

我想创建一个简单的表单，其中包含一个电子邮件地址，然后将其添加到我们的数据库中。我使用了React Forms，因为它有利于整个开发过程并减少了时间。

但是，当我尝试发布表单时，我收到此错误：Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a 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)

我非常感谢所有答案！保持棒极了！

Answer 1

在 AddUserForm.js

中

在这里，你必须添加onSubmitHandler作为接受提交函数的道具，该函数假定在表单提交上运行。然后，您必须将onSubmitHandler传递给handleSubmit()

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

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

在 AddUserContainer.js 中将onSubmit={this.submit.bind(this)}更改为onSubmitHandler={this.submit.bind(this)}

Answer 2

不是100％这是你的问题，但我建议不要尝试绑定表单或其他任何东西。假设您将输入存储在状态的用户对象中，那么您只需要定义一个提交方法，并使用this.state.user进行调用。该方法基本上应该只是调用你的api方法。

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(this.state.user)} />
      </div>
    )
  }
}

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

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

您必须传递handleSubmit（）一个onSubmit函数或传递onSubmit作为prop | Redux表格

2 个答案: