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錯誤處理

回答

相關問題