Redux Form Handle Отправить данные пустые

Проблема

Данные формы не передаются в 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="[email protected]" {...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>
    )
  }
}

reactjs redux redux-form
person Maximus S    schedule 13.04.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы пытаетесь использовать handleSubmit из this.props, но передаете onSubmit.

Вы можете сделать что-то вроде следующего, чтобы переназначить его:

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

Это сокращение для (пропуск поля бит):

const handleSubmit = this.props.onSubmit;
person Chris    schedule 13.04.2016
comment
redux-form пакет ожидает получить handleSubmit в качестве реквизита, и он внутренне называется onSubmit(handleSubmit()), я думаю - person Maximus S; 13.04.2016
comment
Handlesubmit в порядке, но вам нужно переназначить onSubmit (ваш входной параметр) на handleSubmit, прежде чем передавать его по строке - person Chris; 13.04.2016

arrow_upward
0
arrow_downward

Вы не должны передавать какие-либо поля prop, поскольку они определены (правильно) в вашем компоненте формы.

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

Похоже, вы пытаетесь установить начальные значения на ''. Если вы хотите это сделать, вы можете:

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

Но в этом нет необходимости, поскольку '' уже является значением по умолчанию в v5.x.

person Erik R.    schedule 13.04.2016