字段组件外的 Redux-form 6.0.0 访问错误

问题描述：

在 Redux-form v5 中，我能够从装饰表单的任何位置访问内联"错误(异步验证)，如下所示:

In Redux-form v5 I was able to access to the "inline" errors (async validation) from anywhere in the decorated form, like so:

const fields = [
  'email'
]

// inside the decorated form
const { email } = this.props.fields

console.log(email.error) // 'the validation error of the 'email' field

如何使用 Redux-form 6.0.0+ 实现相同的功能?

How can I achieve the same thing using Redux-form 6.0.0+ ?

答

如果你想在输入旁边显示错误，那么它应该在你传递给 component 的 component 中处理代码>字段代码>.如果您想一起显示所有错误，例如在提交按钮的表单底部，您可以使用新的 Fields 组件像这样:

If you are wanting to display the error next to the input, then it should be handled in the component that you pass to Field. If you want to display all the errors together, like at the bottom of the form by the submit button, you could use the new Fields component like so:

const fieldNames = [
  'email',
  'password'
]

const renderAllErrors = fields => (
  <ul>
    {Object.keys(fields).map(key => {
      const { meta: { touched, error } } = fields[ key ]
      return touched && error ? <li key={key}>{key}: {error}</li> : undefined
    })}
  </ul>
)

...

<Fields names={fieldNames} component={renderAllErrors}/>

字段组件外的 Redux-form 6.0.0 访问错误

相关推荐