Question

我一直在阅读Redux表单documentation，关于使用一组初始值预填充表单，但是在该页面的示例中，只需单击按钮即可获取值，而我需要在页面加载时立即拥有它们。

以下是我到目前为止的情况。我可以在render（）方法中接收初始值作为道具，但是我不知道如何将这些值传递给Field组件...

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

import requireAuth from '../components/hocs/requireAuth'; 

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

class UserProfilePage extends React.Component { 

    renderField( field ) {
        return(
            <div className="input-wrap">
                <label htmlFor={ field.name }>{ field.label }</label>
                <input type="text" { ...field.input } />
            </div>
        );
    }

    render() {

        console.log( 'Initial values', this.props.initialValues );

        // Here's what this.props.initialValues looks like: 
        // {
        //    first_name: 'John',
        //    last_name: 'Doe'
        // } 

        return (
            <form>
                <Field
                    label="Your first name"
                    name="first_name"
                    component={ this.renderField } />
            </form>
        );
    }

}

UserProfilePage = connect( 
    state => ({
        initialValues: state.currentUser.personal_info
    })
)( UserProfilePage ); 

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

export default requireAuth( UserProfilePage );

Answer 1

无论您要在哪里呈现UserProfilePage，都会将其作为道具传递，例如：

import UserProfilePage form 'path/to/UserProfilePage';
<UserProfilePage
  {...otherProps}
  initialValues={{first_name: user.first_name}}
/>

这样，当表单将名称为first_name的输入呈现时，将具有传递的值

如何使用Redux表单预填充输入字段

1 个答案: