我尝试在我的表单中为使用自定义组件的某些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
的每个实例的默认值可能不同,因此我不想将默认值存储在那里。任何帮助将不胜感激。