Formik，Yup，formik-material-ui注册表单，单击表单时显示电子邮件错误

Question

我有一个用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}

又是徒劳无功。

Answer 1

解决了。我在电子邮件字段中设置了autoFocus，所以当我单击表单时，电子邮件字段会被标记为已触摸。