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 (将#修改为@）