如何解决Formik-如何清除字段并显示自定义错误
我在React中使用Formik创建登录表单。如果用户输入了错误的登录详细信息,我想:
- 清除密码字段。
- 将密码字段重置为未修改状态,以免触发密码错误消息。
- 显示自定义错误消息,告诉用户其详细信息未被识别。
const onSubmit = (values,{ setTouched,setFieldValue,setFieldError,setSubmitting }) => {
// do some login stuff
// on login error,do the following:
setTouched({});
setFieldValue('password','');
setFieldError('general',"Oops! Sorry,we couldn't log you in.");
};
所有这些东西(setTouched,setFieldValue,setFieldError)都是单独工作的,但是如果我一次全部完成,那么我的自定义常规错误将不会显示。
我猜这是某种异步的事情,导致这些事情发生混乱并隐藏了错误,但我不确定。
任何人都可以帮助我实现目标吗?谢谢!
编辑
我随后尝试使用resetForm
失败。发生相同的事情-重置表单,然后设置字段错误无效:
const onSubmit = (values,{ resetForm,setSubmitting }) => {
login(values).catch(() => {
// do some login stuff
// on login error,do the following:
resetForm();
setFieldError('general',we couldn't log you in.");
setSubmitting(false);
});
};
但是,我已经使用超时取得了一些成功。实际上,即使是1毫秒的超时也可以解决此问题:
const onSubmit = (values,{ setFieldTouched,do the following:
setFieldTouched('password',false);
setFieldValue('password','');
setTimeout(function () {
setFieldError('general',we couldn't log you in.");
},1);
setSubmitting(false);
});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。