在radiogroup上同步驗證（v6）

Question

如何在使用v6版本的redux-form時爲我的radiogroup顯示同步驗證錯誤？一種選擇是創建多個renderField函數，其中只有一個（最後一個）會顯示錯誤。我現在有這樣的設置：

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}/>