reactjs - 如何使用 redux-forms 正确设置默认值？

Question

将 React 与 redux-forms 结合使用，我得到了以下组件，它是一个表单，如果查询字符串包含值，则 3 个输入字段可能会获取值。

我使用initialize方法进行设置:

initialize({
  firstname: query.firstname,
  lastname: query.lastname,
  birthday: query.dob
});

这就满足了，但是我有两个主要问题:

• 提交按钮保持禁用状态
• 这些字段不可编辑。

我尝试通过测试 invalid 属性来修复提交按钮，但没有成功。

我该如何解决和应对这些问题？

这是整个组件代码:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { browserHistory } from 'react-router';
import { reduxForm, Field, SubmissionError } from 'redux-form'
import { RaisedButton, Paper, TextField } from 'material-ui';

import * as actionsAuth from '../redux/modules/auth';
import { createValidator, required, email } from '../utils/validation';
import FieldTextField from '../components-form/FieldTextField';


const styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        paddingTop: 50
    },
    paper: {
        padding: 20,
        maxWidth: 500
    },
    field: {
        width: '100%'
    },
    button: {
        width: '100%',
        marginTop: 10
    }
};

const validate = createValidator({
    firstname: [],
    lastname: [],
    birthday: []
});

class LoginPage extends Component {

    constructor(props) {
        super();
        this.submit = this.submit.bind(this);
    }

    static propTypes = {
        patientChatLogin: PropTypes.func.isRequired
    };

    submit(values) {
        const { user } = this.props;
        let dob = values.birthday.split('-');
        let data = {
            _id: user.id,
            firstname: values.firstname,
            lastname: values.lastname,
            dob: {
                year: dob[0],
                month: dob[1],
                day: dob[2]
            }
        }
        const { patientChatLogin } = this.props;

        return patientChatLogin(data)
            .then(this.onSubmitSuccess, this.onSubmitError);
    }

    onSubmitSuccess(patient) {
        browserHistory.push(`/chat/${patient.id}`);
    }

    onSubmitError(rejection) {
        throw new SubmissionError({ auth: rejection.error, _error: 'Login failed!' });
    }

    ///////////////////
    // render

    render() {
        return (
            <div style={styles.root}>
                {this.renderForm()}
            </div>
        );
    }

    renderForm() {
        const { handleSubmit, initialize, location: {query} } = this.props;
        if (query.firstname && query.firstname !== 'undefined' &&
            query.lastname && query.lastname !== 'undefined' &&
            query.dob && query.dob !== 'undefined') {
            initialize({
              firstname: query.firstname,
              lastname: query.lastname,
              birthday: query.dob
            });
        }
        return (
            <form
                onSubmit={handleSubmit(values => this.submit(values))}
            >
                <Paper style={styles.paper} zDepth={1}>
                    {this.renderFieldFirstName()}
                    {this.renderFieldLastName()}
                    {this.renderFieldBirthday()}
                    {this.renderSubmitButton()}
                </Paper>
            </form>
        );
    }

    renderFieldFirstName() {
        // TODO:
        // Set default as redux-form requires it
        return (
            <Field
                autoFocus
                style={styles.field}
                name="firstname"
                floatingLabelText="First Name"
                component={FieldTextField}
                required
            />
        );
    }

    renderFieldLastName() {
        return (
            <Field
                style={styles.field}
                name="lastname"
                floatingLabelText="Last Name"
                component={FieldTextField}
                required
            />
        );
    }

    renderFieldBirthday() {
        return (
            <Field
                style={styles.field}
                type="date"
                name="birthday"
                floatingLabelText = "Date of Birth"
                floatingLabelFixed={true}
                component={FieldTextField}
                required
            />
        );
    }

    renderSubmitButton() {
        const { pristine, submitting, invalid } = this.props;
        return (
            <RaisedButton
                style={styles.button}
                type="submit"
                label="Enter secure chat"
                secondary
                disabled={ pristine || submitting ||  invalid }
            />
        );
    }
}

export default connect(state => ({
        user: state.auth.user,
}), {
        ...actionsAuth,
    })
    (reduxForm({
        form: 'AuthenticatePatientForm',
        validate,
    })(LoginPage));

Answer 1

您无法编辑这些字段，因为如果这些 Prop 存在，您就会在每次渲染时进行初始化。要使用 initialize，您需要在 componentDidMount 中而不是在渲染方法中执行此操作。

另一种方法是包装表单组件并根据这些属性提供 initialValues。

const Wrapper = ({ location: { query }, ...props }) => {
  class LoginPage extends Component {
    ...
  }
  const WrappedForm = reduxForm({
    form: 'the-form',
    validate,
    initialValues: {
      firstname: query.firstname,
      lastname: query.lastname,
      birthday: query.dob
    }
   })(LoginPage);
   return <WrappedForm {...props} />;
 }