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

在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的任何想法？

最佳答案

如果您不介意某些代码重复，则可以这样进行:

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。

关于reactjs - redux-form v6显示选择字段的验证错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39493993/