redux-form具有自定义组件的字段 - 默认值?

时间:2018-01-22 16:26:06

标签: reactjs redux-form

我尝试在我的表单中为使用自定义组件的某些Field设置默认值,但我无法使其正常工作。我想这样做的原因是因为当我按下提交按钮时,我得到undefined作为没有值的Field的值。出于这个原因,我想指定要初始化的Field的默认值,但是我无法弄清楚在将自定义组件传递到字段时如何做到这一点。

这是我的表格

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import CustomInput from './CustomInput';

class ProfileForm extends Component {
    render() {
        const {
            handleSubmit,
            error,
            submitting
        } = this.props;

        return (
            <form className='registerform' onSubmit={handleSubmit}>
                <div className='form-panel'>
                    <label>
                        Persoonlijke gegevens
                    </label>
                    <div className='row row-small'>
                        <div className='col-xs-5'>
                            <Field name='firstName'
                                className='form-group'
                                inputClassName='form-control'
                                component={CustomInput}
                                type='text'
                                placeholder='Voornaam'
                                defaultValue='some lastName' />
                        </div>
                        <div className='col-xs-7'>
                            <Field name='lastName'
                                className='form-group'
                                inputClassName='form-control'
                                component={CustomInput}
                                type='text'
                                placeholder='Achternaam'
                                defaultValue='some firstName' />
                        </div>
                    </div>
                </div>

                <div className='form-panel'>
                    <button type='submit' className='btn btn-big btn-blue btn-full uppercase' disabled={submitting}>
                        {
                            submitting &&
                            <span>Opslaan...</span>
                        }
                        {
                            !submitting &&
                            <span>Opslaan</span>
                        }
                    </button>
                </div>
            </form>
        );
    }
}

ProfileForm = reduxForm({
    form: 'profile'
})(ProfileForm);

export default connect()(ProfileForm);

在上面的代码示例中,我尝试使用defaultValue属性设置默认值,根据文档here,但是这没有用,我也注意到了这个版本的文档已过时,最新版本似乎没有defaultValue属性。

这是我的CustomInput组件:

import React, { Component } from 'react';
import classNames from 'classnames';

class CustomInput extends Component {
    render() {
        let {
            input,
            placeholder,
            type,
            className,
            inputClassName,
            showLabel,
            meta: { touched, error }
        } = this.props;

        if (error) {
            inputClassName += ' invalid';
        }

        let inputElement = <input {...input} className={inputClassName} type={type} placeholder={placeholder} />;
        if (type === 'textarea') {
            inputElement = <textarea {...input} className={inputClassName} placeholder={placeholder} />;
        }

        return (
            <div className={className}>
                {
                    showLabel &&
                    <label>{placeholder}</label>
                }
                {inputElement}                
                {
                    error &&
                    <span>
                        {error}
                    </span>
                }
            </div>
        );
    }
}

CustomInput.defaultProps = {
    showLabel: false
};

export default CustomInput;

如何将默认值传递给CustomInput组件? CustomInput的每个实例的默认值可能不同,因此我不想将默认值存储在那里。任何帮助将不胜感激。

0 个答案:

没有答案