radiogroup (v6) 上的同步验证

Question

在使用 v6 版本的 redux-form 时，如何显示我的广播组的同步验证错误？一种选择是创建多个 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}/>

radiogroup (v6) 上的同步验证

Sync validation on a radiogroup (v6)

reactjs

redux

redux-form