我正在使用 react 和 formik 创建一个表单。下面是我的代码:
<div>
<Formik
initialValues={{
email: ""
}}
onSubmit={(values: FState, setSubmitting: any) => {
console.log("Enter in submit function", values);
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 500);
}}
validationSchema={validationSchemaGlobal}
>
{({
errors,
touched,
handleBlur,
handleChange,
isSubmitting,
values,
handleSubmit
}: any) => (
<div>
<Cards>
<form onSubmit={handleSubmit}>
<CardBody>
<h4>
Enter Your Email Address and we'll send you a link to reset your
password
</h4>
<Field
type="text"
id="email"
value={values.email}
component={CustomInput}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && touched.email ? (
<div style={{ color: "red" }}>{errors.email}</div>
) : null}
</CardBody>
<CardFooter>
<br />
<button type="submit" disabled={isSubmitting}>
Send Password Reset Link
{/* {isSubmitting && <i className="fa fa-sponner fa-spin"/>} */}
</button>
</CardFooter>
</form>
</Cards>
</div>
)}
</Formik>
</div>
在这个 formik 表单中,onSubmit 函数不起作用。我不知道为什么?请告诉我我的代码有什么问题?
最佳答案
检查您的validationSchema
。我遇到了这个问题,发现我的验证器正在返回一些东西,向 Formik 表明表单无效,但没有出现其他警告或消息。它只是不会提交。
用 validator={() => ({})}
替换该 Prop ,即只返回一个空对象。那应该通过验证并触发您的 onSubmit。您可以从那里恢复您的功能。
<Formik
initialValues={{
email: ""
}}
onSubmit={() => { console.log("submit!"); }}
validator={() => ({})}
>
{/* */}
</Formik>
关于reactjs - Formik onSubmit 函数不适用于我的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55237482/