reactjs - Redux 表单句柄提交数据为空

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

您不应该传入任何字段 prop，因为它们是在表单组件中（正确）定义的。

<SignUpForm
  fields={fields} // <----- REMOVE THIS
  onSubmit={this.onSignUp}
/>

看起来您正在尝试做的是将初始值设置为''. 如果你想这样做，你可以这样做：

<SignUpForm
  initialValues={{ email: '', password: '' }}
  onSubmit={this.onSignUp}
/>

但这不是必需的，''因为v5.x.

Answer 2

您正在尝试使用handleSubmitthis.props，但您正在传入onSubmit.

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

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

这是（跳过字段位）的简写：

const handleSubmit = this.props.onSubmit;