Reduxフォームのテキストエリアのエラー処理

Question

textareaフィールドには、同期エラー処理がinputフィールドのように動作しないことがあります。たとえば、フォームの入力フィールドに同期エラーを表示した後、フィールドに入力を開始すると、エラーがうっかり消えます。テキストエリアでは、入力を開始したとき（またはフィールドから出るとき）に同期エラーが表示されます。

フィールドを終了すると、基本的にonBlurはtouched〜trueに設定されていません。

Reduxフォームのtextareaフィールドで同期エラー処理を処理する際に、何を考慮する必要がありますか？

Answer 1

redux-form^6.x.xはv4とv5に比べて多くの実装を変更しました サンプルコードを投稿すると、私はあなたをより良く助けることができます。

私はuは何を意味するかと思いますが、通常のフィールドには罰金が、フィールドあなた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) 

簡単なコード例を残します