Formik handleReset正在通过验证

Question

我想在Formik表单上添加一个Reset按钮。问题是，当我单击Reset按钮时，Formik会显示验证错误。只有在我第二次单击Reset按钮后，表单才会真正重置。如果用户只想重置表单，为什么还要进行表单验证呢?这是我的表单组件:

const ContactForm = () => {
const submit = async (values, { setSubmitting, resetForm }) => {
... submit logic ...
}
return (
<Formik
initialValues={{
name: '',
email: '',
message: '',
}}
validationSchema={Yup.object({
name: Yup.string()
.min(3, 'Tamanho mínimo: 3 caracteres')
.max(20, 'Tamanho máximo: 20 caracteres')
.required('Campo obrigatório.'),
...more fields ...
})}
onSubmit={submit}
>
{({ isValid, isSubmitting, handleReset }) => (
<Form>
<div className="mb-3">
<label htmlFor="name" className="form-label">
Nome
</label>
<Field
name="name"
type="text"
className="form-control"
aria-describedby="nameHelp"
/>
<ErrorMessage
component="div"
id="nameHelp"
name="name"
className="form-text text-warning"
/>
</div>
... more fields ...
<button
type="submit"
disabled={isSubmitting || !isValid}
className="btn btn-primary shadow me-3"
>
Enviar
</button>
<button
disabled={isSubmitting}
className="btn btn-outline-primary shadow"
onClick={handleReset}
>
Apagar
</button>
</Form>
)}
</Formik>
)
}
export default ContactForm

我一定是做错了什么。如何在不经过验证过程的情况下重置表单?

Answer 1

我认为你应该更新你的重置按钮如下-

<button type="reset"  onClick={ e => formik.resetForm()}> Reset</button>