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>
この形式では、onSubmit関数が機能しません。なぜだかわかりませんか?私のコードの何が問題なのか教えてください
validationSchema
を確認してください。私はこの問題に遭遇し、フォームが無効であることをFormikに通知する何かをバリデーターが返していましたが、他の警告やメッセージは出ていませんでした。送信しないだけです。
そのプロップをvalidator={() => ({})}
に置き換えます。つまり、空のオブジェクトのみが返されます。検証に合格し、onSubmitがトリガーされます。そこから機能を復元できます。
<Formik
initialValues={{
email: ""
}}
onSubmit={() => { console.log("submit!"); }}
validator={() => ({})}
>
{/* */}
</Formik>