reactjs - Redux Form Handle提交数据为空

Question

问题

表单的数据在提交时不会传递到 handleSubmit() 函数。我做错了什么？

表单

import React from 'react'
import { reduxForm } from 'redux-form'
export const fields = ['email', 'password']

const validate = (values) => {
  const errors = {}
  return errors
}

export class SignUp extends React.Component {
  props: Props;

  render() {
    const {
      fields: { email, password },
      handleSubmit
    } = this.props

    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Email</label>
          <div>
            <input type="email" placeholder="you@gmail.com" {...email}/>
          </div>
        </div>
        <div>
          <label>Password</label>
          <div>
            <input type="password" placeholder="Password" {...password}/>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    )
  }
}

SignUp = reduxForm({
  form: 'SignUp',
  fields,
  validate
})(SignUp)

export default SignUp

表单的父级

export class SignUpView extends React.Component {
  props: Props;

  constructor(props) {
    super(props)

    this.onSignUp = this.onSignUp.bind(this)
  }

  onSignUp(data) {
    console.log(data) <-- data is just an empty Object {}
    this.props.signUp({
      email: email,
      password: password
    });
  }

  render() {
    var fields = {
      email: '',
      password: ''
    }

    return (
      <div>
        <h1>Sign Up Form</h1>
        <SignUpForm
          fields={fields}
          onSubmit={this.onSignUp}
        />
      </div>
    )
  }
}

Answer 1

您正在尝试使用 this.props 中的 handleSubmit，但您正在传入 onSubmit。

您可以执行以下操作来重新映射它:

const {
  fields: { email, password },
  onSubmit: handleSubmit
} = this.props

这是(跳过字段位)的简写:

const handleSubmit = this.props.onSubmit;