在 redux-form 的 v6 中,我们可以显示正常输入字段的错误,如下所示
我们可以像这样创建自定义渲染字段
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"/>
现在我需要知道,我们如何对选择字段执行相同的操作,以及我们应该如何将下拉选项传递给此自定义渲染字段,有什么想法为选择创建自定义渲染字段吗?
最佳答案
如果你不介意一些代码重复,你可以这样做:
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/