我正在使用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函数没有起作用。我不知道为什么?请告诉我,大家觉得我的代码有什么问题?
onSubmit
方法根本没有被调用?我认为你应该将onSubmit
方法的第二个参数命名为actions
,并且使用actions.setSubmitting
而不是仅仅的setSubmitting
,因为它是一个传递给它的对象,而不是一个函数。 - Thollecomponent={CustomInput}
并将所有其他自定义组件更改为 div,并更改了验证模式,因为你没有提供你的验证模式。也许问题出在你的 CustomInput 或验证上? - Kiya