Не удается получить обновленные значения формы с помощью формы Redux - PullRequest
Новая
       6

Не удается получить обновленные значения формы с помощью формы Redux

0 голосов
/ 07 июня 2018

Я создал форму Redux в приложении React, однако, если я заполняю поля и затем отправляю форму, введенные мной значения не передаются методу onSubmit.Я не вижу, что я делаю неправильно ... 

import React from 'react';
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import { Redirect } from 'react-router-dom'; 

import Input from './Input'; 
import MainBtn from '../MainBtn'; 
import requireAuth from '../hocs/requireAuth'; 
import Select from './Select'; 

import { updateUserInfo } from '../../actions/userActions'; 

class UserProfileForm extends React.Component { 

    onSubmit( values ) {
        // In the console I always get an empty array, even though I filled the form's fields
        console.log( values );
    }

    render() {

        const { handleSubmit } = this.props; 

        return (
            <form onSubmit={ handleSubmit( this.onSubmit.bind( this ) ) } noValidate>
                <Field
                    label="Your first name"
                    name="rcp_user_first"
                    component={ Input } />
                <Field
                    label="Your last name"
                    name="rcp_user_last"
                    component={ Input } />

                <Field
                    label="Your postal address"
                    name="rcp_postal_address"
                    component={ Input } />
                <Field
                    label="Your email"
                    name="rcp_email"
                    component={ Input } />
                <Field
                    label="Choose a new password"
                    name="rcp_new_user_pass1"
                    component={ Input } /> 
                <Field
                    label="Confirm your new password"
                    name="rcp_new_user_pass2"
                    component={ Input } />                     
                <MainBtn label="Update your profile" />                                                                                                   
            </form>
        );
    }

}

UserProfileForm = connect(
    null, { updateUserInfo }
)( UserProfileForm ); 

UserProfileForm = reduxForm({
    form: 'UpdateProfileForm'
})( UserProfileForm );

export default requireAuth( UserProfileForm );

Вот мой Field компонент, на случай, если это поможет: 

import React from 'react';

const Input = props => {
    return (
        <div className="input-wrap">
            <label htmlFor={ props.input.name }>{ props.label }</label>
            <input 
                type="text"
                id={ props.input.name }
                defaultValue={ props.meta.initial }
                value={ props.value } />
        </div>
    );
}

export default Input;

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Здесь все в порядке, вам просто нужно добавить кнопку для отправки формы с атрибутом типа отправки вроде этого ... 

<form action="submit"
 onSubmit={handleSubmit(this.submitForm)}
>
  <div>
    <Field
      type="email"
      name="email"
      floatingLabelText="Email"
      hintText="Email"
      component={TextField}
      disabled={isSubmitting}
      fullWidth
    />
  </div>
 <button type="submit">Submit Form</button>
</form>
0 голосов
/ 07 июня 2018

Вы пробовали что-то подобное?Я думаю, что это должно работать. 

import React from 'react';
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import { Redirect } from 'react-router-dom'; 

import Input from './Input'; 
import MainBtn from '../MainBtn'; 
import requireAuth from '../hocs/requireAuth'; 
import Select from './Select'; 

import { updateUserInfo } from '../../actions/userActions'; 

class UserProfileForm extends React.Component { 

    onSubmit( values ) {
        this.props.handleSubmit(values);
        console.log( values );
    }

    render() {

        return (
            <form onSubmit={ values => this.onSubmit(values) ) } noValidate>
                <Field
                    label="Your first name"
                    name="rcp_user_first"
                    component={ Input } />
                <Field
                    label="Your last name"
                    name="rcp_user_last"
                    component={ Input } />

                <Field
                    label="Your postal address"
                    name="rcp_postal_address"
                    component={ Input } />
                <Field
                    label="Your email"
                    name="rcp_email"
                    component={ Input } />
                <Field
                    label="Choose a new password"
                    name="rcp_new_user_pass1"
                    component={ Input } /> 
                <Field
                    label="Confirm your new password"
                    name="rcp_new_user_pass2"
                    component={ Input } />                     
                <MainBtn label="Update your profile" />                                                                                                   
            </form>
        );
    }

}

UserProfileForm = connect(
    null, { updateUserInfo }
)( UserProfileForm ); 

UserProfileForm = reduxForm({
    form: 'UpdateProfileForm'
})( UserProfileForm );

export default requireAuth( UserProfileForm );
...