Reactjs Formik:按字段进行验证

Reactjs Formik:按字段进行验证,reactjs,formik,Reactjs,Formik,验证时所有字段的Formik调用验证。 某些字段的更改会导致表单中所有其他字段的验证执行。当我通过向组件传递validate prop来使用独立字段验证时,就会发生这种情况 我通过向组件传递验证道具来使用字段验证,如下所示: <Field type="text" name={field.name} placeholder={field.caption} options={field.options || undefined} label={f

验证时所有字段的Formik调用验证。 某些字段的更改会导致表单中所有其他字段的验证执行。当我通过向组件传递validate prop来使用独立字段验证时,就会发生这种情况

我通过向组件传递验证道具来使用字段验证,如下所示:

<Field 
    type="text" 
    name={field.name}  
    placeholder={field.caption}
    options={field.options || undefined}
    label={field.caption}
    component={stringToComponentMapper[field.component]}
    type={field.component}
    validate={this.isRequired}
/>

isRequired=value=>{
console.log(值);
}
(
{formFields.fields&&formFields.fields.length>0&&
formFields.fields.map((字段,索引)=>(
))
}
提交
)}
/>

例如:在电子邮件字段中键入时,验证将调用所有字段。
Formik
中的每个字段验证并不意味着在必要时验证字段。这意味着每个字段都可以获得满足用户需要的自定义验证(例如自定义电子邮件验证等)。因此,要检查字段内的要求,您的
isRequired
功能必须更改如下:

const isRequired = (value) => {
    return !value ? "Required" : "";
} 

Formik
不会在每个字段发生更改时单独对其进行验证,而是在发生更改时对每个字段进行验证此行为是在库创建者打算回答此问题时发生的

您介意使用诸如@Rallen Sandbox链接之类的服务创建一个工作示例吗?@Rallen Sandbox链接:尝试编辑“First Name”字段并查看控制台树,但我的问题是,当我在“First Name”中修改数据时字段,那么为什么对其余字段调用isRequired方法?它应该只为“First Name”字段调用。正如我所说的,每个字段验证并不意味着验证
firstName
中的每个字段,如果编辑,它意味着自定义验证过程,例如,您希望
firstName
永远不成为
Aaron
(对不起,所有Aaron)对不起!我没听清楚这句话。你希望名字永远不是亚伦。你能解释一下吗?谢谢你的帮助。但我还有一个疑问。正如您所说,validate也将为字段的其余部分调用。比如说,如果有一个站点有更多的表单字段,那么它会影响性能吗?如果您曾经遇到
Formik
的性能问题,请使用
FastField
组件,而不是
Field
组件。但这不是你问的问题的一部分。
const isRequired = (value) => {
    return !value ? "Required" : "";
}