Redux表单textarea错误处理

我注意到在textarea字段中，同步错误处理的行为不像input字段。例如，在表单的输入字段上显示同步错误后，当我开始在字段中输入内容时，该错误将愉快地消失。在textarea字段中，当我开始输入时（或离开字段时），同步错误就在那里。Redux表单textarea错误处理

基本上，当我离开现场时，onBlur没有设置touched到true。

在Redux表单的textarea字段中处理同步错误处理时应该考虑什么额外的事情？

来源

2016-11-26 user2078922

与v4和v5相比，redux-form^6.x.x改变了很多实现方式如果您发布了示例代码，我可以帮助您更好地实现。

我想什么ü意思，正常的田间工作正常，但场

这意味着您的reduxForm（...）正常工作，有可能是在你的错误处理函数或场渲染功能的问题。

我留下简单的代码示例

// validate 
const validate = (values) => { 
    const errors = {}; 
    if(!values.title) { 
     errors.title = 'title require'; 
    } 
    if (!values.categories) { 
     errors.categories = 'categories require'; 
    } 
    if (!values.content) { 
     errors.content = 'content require'; 
    } 
    return errors; 
}; 

// renderField 
const renderField = ({ input, label, type, textarea, meta: { touched, error, warning, invalid } }) => { 
    const textareaType = <textarea {...input} placeholder={label} type={type} className={`form-control ${touched && invalid ? 'has-danger' : ''}`}/>; 
    const inputType = <input {...input} placeholder={label} type={type} className={`form-control ${touched && invalid ? 'has-danger' : ''}`}/>; 

    return (
     <div> 
      <label>{label}</label> 
      <div> 
       {textarea ? textareaType : inputType} 
       {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))} 
      </div> 
     </div> 
    ); 
}; 

// React render 
<form onSubmit={handleSubmit}> 
    <Field name="title" component={renderField} type="text" label="Title" /> 
    <Field name="categories" component={renderField} type="text" label="Categories" /> 
    <Field name="content" component={renderField} type="text" label="Content" textarea={true} /> 
    <button type="submit" disabled={pristine || submitting} className="btn btn-primary">Submit</button> 
</form> 

reduxForm({ 
    form: 'TestComponent', // Name of the form 
    validate    // <--- validation function given to redux-form 
})(TestComponent)

来源

2016-11-27 21:15:56 GymInst

Redux表单textarea错误处理

回答

相关问题