radiogroupでの同期検証（v6）

Question

v6バージョンのredux-formを使用しているときに、自分のradiogroupの同期検証エラーを表示するにはどうすればよいですか？ 1つのオプションは、複数のrenderField関数を作成することです（最後の1つだけがエラーを表示する）。私は現在、次のように設定しています。

const renderField = ({ input, meta: { touched, error } }) => (
    <span> 
    <input 
     {...input} 
    /> 
    { 
     touched && 
     error && 
     <div> 
      {error} 
     </div> 
    } 
    </span> 
); 

// Form-component 
// I loop trough multiple values 

<Field 
    type="radio" 
    component={renderField} 
    id={`${field.name}-${value}`} 
    value={value} 
    name={field.name} 
/> 

<Field 
    type="radio" 
    id={`${field.name}-${value}`} 
    value={value} 
    name={field.name} 
/> 

このように、エラーは複数回（各値ごとに）表示されます。最後の値であるときに余分な小道具を渡して、そのフィールドだけのエラーを有効にすることができます。それはうまくいくかもしれませんが、ちょっと厄介です。

Answer 1

これは興味深い質問です。もう一つの選択肢は、レンダリングエラーをちょうど担当していたコンポーネントを書くことです。あなたのラジオボタンをレンダリングした後

const renderError = ({ meta: { touched, error } }) => 
    touched && error && <div>{error}</div> 

次に、あなたが行うことができます：

<Field name={field.name} component={renderError}/>