如何解决React Formik:我的自定义 onBlur 覆盖默认的触摸行为并且不显示我的 ErrorMessage
我 2 个月前刚开始学习编码,本周我尝试使用 Formik 并遇到了这个问题,即我在字段上添加 onBlur 后无法显示我的 ErrorMessage,在添加之前,它工作正常。
此外,我没有找到另一种使用 onBlur 的方法,这就是我在现场对其进行编码的原因。 如果有帮助,我将不胜感激。
import { Formik,Field,Form,ErrorMessage } from "formik";
import Schema from "./Schema";
import { Container,Row,Col } from "react-bootstrap";
import { useState } from "react";
import Result from "./Result";
import { BsEyeSlashFill } from "react-icons/bs";
const Register = () => {
const [data,setData] = useState(false);
const [showPassword,setShowPassword] = useState(false)
const [showConfirmPassword,setConfirmShowPassword] = useState(false)
const [checkmarkName,setcheckmarkName] = useState(null)
const [checkmarkSurname,setcheckmarkSurname] = useState(false)
const [checkmarkEmail,setcheckmarkEmail] = useState(false)
const [checkmarkPass,setcheckmarkPass] = useState(false)
const [checkmarkConfirmPass,setcheckmarkConfirmPass] = useState(false)
const hidePassword = () => {
setShowPassword(!showPassword)
}
const hideConfirmPassword = () => {
setConfirmShowPassword(!showConfirmPassword)
}
function onSubmit(values,actions) {
setData(values)
}
return (
<Formik
validationSchema={Schema}
onSubmit={onSubmit}
validateOnMount
initialValues={{
name: "",surname: "",email: "",password: "",confirmPassword: "",}}
>
{(props) => (
<Container>
<Row className="justify-content-center mt-3" >
<Col className="text-center d-flex justify-content-center" md={8}>
<Form className="mt-5 div-form w-100">
{console.log(props)}
<div className="errors mt-3">
<label>Nome</label>
<Field onBlur={() => {
if(!props.errors.name)(
setcheckmarkName(true)
)
}} name="name" className={checkmarkName ? "form-control form-control-green" : "form-control"} type="text" />
<div><ErrorMessage name="name" /></div>
</div>
<div className="errors mt-3">
<label>Surname</label>
<Field onBlur={() => {
if(!props.errors.surname)(
setcheckmarkSurname(true)
)
}} name="surname" className={checkmarkSurname ? "form-control form-control-green" : "form-control"} type="text" />
<div><ErrorMessage name="surname" /></div>
</div>
<div className="errors mt-3">
<label>Email</label>
<Field onBlur={() => {
if(!props.errors.email)(
setcheckmarkEmail(true)
)
}} name="email" className={checkmarkEmail ? "form-control form-control-green" : "form-control"} type="email" />
<div><ErrorMessage name="email" /></div>
</div>
<div className="errors mt-3 position-relative">
<label>Password</label>
<Field onBlur={() => {
if(!props.errors.password)(
setcheckmarkPass(true)
)
}}
name="password"
className={checkmarkPass ? "form-control form-control-green" : "form-control"}
type={showPassword ? 'text' : 'password'}
></Field>
<span className="position-relative eyes text-white"><BsEyeSlashFill onClick={() => hidePassword()} /></span>
<div className="position-relative error-msg"><ErrorMessage name="password" /></div>
</div>
<div className="errors mb-4 position-relative">
<label>Confirm Password</label>
<Field onBlur={() => {
if(!props.errors.confirmPassword)(
setcheckmarkConfirmPass(true)
)
}}
name="confirmPassword"
className={checkmarkConfirmPass ? "form-control form-control-green" : "form-control"}
type={showConfirmPassword ? 'text' : 'password'}
/>
<span className="position-relative eyesConfirm text-white"><BsEyeSlashFill onClick={() => hideConfirmPassword()} /></span>
<div className="position-relative error-msg"><ErrorMessage name="confirmPassword" /></div>
</div>
<button
className="btn btn-primary mb-3"
disabled={!props.isValid}
type="submit"
>
Enviar
</button>
<button
className="btn btn-primary mb-3 ml-3"
type="button"
onClick={() => setData(false)}
>
Reset
</button>
</Form>
</Col>
{
data &&
<Result data={data}/>
}
</Row>
</Container>
)}
</Formik>
);
};
export default Register;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。