Question

使用vx版本的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}/>

在无线电组上进行同步验证（v6）

1 个答案: