redux-form v6 显示 select 字段的验证错误

Question

在 redux-form v6 中，我们可以显示正常输入字段的错误，如下所示

我们可以像这样创建自定义 renderField

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

并且在表单中，我们可以使用自定义的 renderField

 <Field name="username" type="text" component={renderField} label="Username"/>

现在我需要知道，我们如何为 select 字段做同样的事情，以及我们应该如何将下拉选项传递给这个自定义 renderFields，有没有为 select 创建自定义 renderField 的想法？

Answer 1

如果你不介意一些代码重复，你可以这样做：

const renderSelectField = ({ input, label, type, meta: { touched, error }, children }) => (
  <div>
    <label>{label}</label>
    <div>
      <select {...input}>
        {children}
      </select>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

以以下形式使用它：

<Field name="username" component={renderSelectField} label="Username">
  { mySelectOptions.map(option => <option value={option.value}>{option.text}</option>) }
</Field>

您可以看到，将选项传递给 select 是通过 props.children 完成的，与将 Field 组件与 component="select" 一起使用时完全相同。

如果您不想重复，您可以尝试让原来的 renderField 更聪明一点。例如，您可以查看 children 是否包含选项标签，如果是，则呈现 <select> 而不是 input.

redux-form v6 显示 select 字段的验证错误

redux-form v6 show validation error for select field

reactjs

redux

redux-form