Formik，是的，formik-material-ui 注册表单在单击表单时显示 email 错误

Question

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

如果我单击表单上的任何位置，它会显示 email 错误，这意味着如果用户单击“已经有帐户？ 登录”，表单显示此错误，而不是重定向到登录：

      <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} 无济于事。 我也尝试将其添加到 email 字段

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

再次无济于事。

Answer 1

解决了。 我在 email 字段上设置了自动对焦，所以当我点击表格时，email 字段被标记为已触摸。