Question

我在React应用程序中创建了一个Redux表单，但是如果我填写字段然后提交表单，我输入的值就不会传递给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;

Answer 1

你尝试过类似的东西吗？我认为它应该有用。

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 );

Answer 2

此处一切正常，您只需添加一个按钮，用于提交带有类似提交属性的表单...

<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>

无法使用Redux表单获取表单的更新值

2 个答案: