0

我有一个使用 Formik、Yup 和 formik-material-ui 构建的注册表单:

报名表

如果我单击表单上的任何位置,它会显示电子邮件错误,这意味着如果用户单击“已经有帐户?登录”,表单显示此错误,而不是重定向到登录:

电子邮件错误

      <Formik
        initialValues={{
          phoneNumber: '',
          email: '',
          password: '',
          confirmPassword: '',
          canMarket: false,
        }}
        validationSchema={yup.object().shape({
          email: yup
            .string('Email Address')
            .email('Enter a valid email')
            .required('Email is required'),
          password: yup
            .string()
            .required('Password is required')
            .min(8, 'Password is too short - should be 8 chars minimum'),
          confirmPassword: yup
            .string()
            .required('Confirm Password is required')
            .oneOf([yup.ref('password'), null], 'Passwords must match'),
          phoneNumber: yup.string().required('Phone Number is required'),
        })}
        onSubmit={(
          { phoneNumber, email, password, canMarket },
          { setSubmitting },
        ) => {
          signUp(client, phoneNumber, email, password, canMarket, history);
          setTimeout(() => {
            setSubmitting(false);
          }, 500);
        }}
      >
        {({ dirty, isValid, isSubmitting, handleSubmit }) => (
          <Form onSubmit={handleSubmit}>
            <Field
              className="auth__field"
              variant="outlined"
              fullWidth
              component={TextField}
              type="email"
              label="Email Address"
              name="email"
              autoFocus
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <EmailIcon color="primary" />
                  </InputAdornment>
                ),
              }}
            />
            <Field
              className="auth__field"
              variant="outlined"
              fullWidth
              component={TextField}
              type="password"
              label="Password"
              name="password"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <LockIcon color="primary" />
                  </InputAdornment>
                ),
              }}
            />
            ...

我尝试添加 updateOnBlur={true} 和 updateOnChanged={true} 无济于事。我也尝试将其添加到电子邮件字段

error={touched.email && errors.email}

再次无济于事。

4

1 回答 1

-1

解决了。我在电子邮件字段上设置了自动对焦,因此当我单击表单时,电子邮件字段被标记为已触摸。

于 2020-08-03T10:45:25.163 回答