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

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字段做同样的事情,我们应该如何将dropdown选项传递给这个自定义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>

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

如果您不想复制,可以尝试使原始设备renderField更加智能化.例如,您可以看到是否children包含选项标记,如果包含,则显示<select>而不是input.