我使用的是redux-form 7.0.4,除了以下问题外,它的工作正常。
新用户可以输入详细信息,现有用户可以在同一表单上编辑详细信息。当现有用户编辑详细信息并从表单字段中删除数据时,我遇到了问题。我想添加check onBlur。如果用户空表单字段并且存在模糊事件,则需要填写字段内的初始数据。
表单字段:
<Field
component={InputField}
type='text'
name='registeredName'
className='form-control'
required
placeholder='Registered Business Name*'
/>
InputField组件:
const InputField = ({
input,
type,
placeholder,
meta: { touched, error, initial }
}) => {
const onChange = (e) => {
const val = e.target.value;
if (type === 'phoneNumber') {
if (!/^\d+$/.test(val) || String(val).length > 10) {
return;
}
}
input.onChange(e);
};
return (
<div className='form-group'>
<input
{...input}
onChange={onChange}
type={type}
className='form-control'
placeholder={placeholder}
value={input.value }
onBlur={e => {input.value = (!e.target.value) ? initial : e.target.value;}}
/>
{touched &&
((error &&
<div className='error text-danger'>
{error}
</div>
))}
</div>
);
};
/* eslint-enable */
export default InputField;