在表单提交React JS后重置Formik表单,可以通过以下步骤实现:
npm install formik
import { Formik, Form, Field, ErrorMessage } from 'formik';
const initialValues = {
name: '',
email: '',
password: ''
};
const validateForm = (values) => {
const errors = {};
if (!values.name) {
errors.name = 'Required';
}
if (!values.email) {
errors.email = 'Required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
errors.email = 'Invalid email address';
}
if (!values.password) {
errors.password = 'Required';
} else if (values.password.length < 6) {
errors.password = 'Password must be at least 6 characters long';
}
return errors;
};
<Formik
initialValues={initialValues}
validate={validateForm}
onSubmit={(values, { resetForm }) => {
// 处理表单提交逻辑
// ...
// 重置表单
resetForm();
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label htmlFor="name">Name</label>
<Field type="text" name="name" />
<ErrorMessage name="name" component="div" />
</div>
<div>
<label htmlFor="email">Email</label>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
</div>
<div>
<label htmlFor="password">Password</label>
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
在上述代码中,当表单提交时,通过onSubmit回调函数处理表单提交逻辑,并在处理完逻辑后调用resetForm函数重置表单。
这样,当用户点击提交按钮时,表单将被提交并重置为初始状态,清空所有输入字段的值。
关于Formik的更多信息和使用方法,你可以参考腾讯云的Formik产品介绍链接地址:Formik产品介绍
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云