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 字段被標記為已觸摸。