javascript - 以编程方式呈现的 Redux 字段的动态验证

Question

无法找到我遇到的问题的直接答案，所以希望 SO 上的某个人可以帮助我...

我有一个简单的 Redux 表单，它只有一个 First Name 和 Last Name 输入字段。这些字段不是显式写出，而是以编程方式呈现，如下所示:

...

renderNameInput(field) {
  const { content } = this.props;

  return (
    <Field
      id={field}
      name={field}
      component={FormField}
      validate={this.nameValidations}
      error={!this.isNameValid(field) ? content.nameError : null}
    />
  );
}

...

render() {
  <form onSubmit={handleSubmit}>
    <div>
      {this.renderNameInput('firstName')}
      {this.renderNameInput('lastName')}
    </div>
  </form>
}

我遇到的问题是当字段未验证时显示错误。每个字段最少需要 2 个字符，最多需要 16 个字符(尽管这与我的具体问题无关)。

我想做的是，当其中一个输入无效时，错误会显示在该输入下。如果两个输入都无效，那么错误将显示在两个输入下(在各自位置显示错误的结构和样式当然已经完成，只是不是这个问题的一部分)

这是我检查错误的方法:

...

isNameValid(field) {
  const { formState = {} } = this.props;
  const { syncErrors } = formState;

  if (syncErrors && syncErrors[field]) {
    return false;
  }
}

...

该组件已连接到 Redux 存储，因此我可以访问表单中的 formState 以及 initial 和 values 对象，以及他们何时被访问ed、touched 等。

如果 - 当用户更改输入值时 - syncErrors 对象在查看商店中的 Redux 状态时看起来像这样(任意):

syncErrors: {
  firstName: 'Must be at least 2 characters'
}

然后我想在 firstName 输入下显示一条错误消息，但在 lastName 输入下不显示任何错误消息。同样，如果 lastName 是 syncErrors 对象的一部分，那么错误也会显示在该输入下。如果 firstName 和 lastName 都在 syncErrors 中，则错误将显示在两个输入下。

我希望这是有道理的，并且有人可以为我指明正确的方向。如果需要任何说明，请告诉我。

谢谢!

Answer 1

如果您将错误消息作为 prop 传递给 Field组件，那么您可能只想向 Field 添加一些代码显示错误的组件(如果有的话)。它应该看起来像这样: {this.props.error ? (<p>{this.props.error}</p>) : null}

因为您无法更改 Field 中显示的内容组件，我建议允许 renderNameInput 中的组件存在以访问 Redux 中的错误对象。这样你就可以制作renderNameInput返回 Field组件和错误消息。像这样:

renderNameInput(field) {
  const { content, error } = this.props;

  return (
    <div>
      <Field
        id={field}
        name={field}
        component={FormField}
        validate={this.nameValidations}
        error={!this.isNameValid(field) ? content.nameError : null}
      />
      <p>{error[field] ? (<p>{error[field]}</p>) : null}}</p>
    </div>
  );
}