我有一个使用 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}
再次无济于事。