在使用React和Formik时,如果你想从<Form>
组件外部触发onSubmit
事件,可以通过以下步骤实现:
你可以通过引用(ref)来访问Formik的实例,然后调用其submitForm
方法来触发提交。以下是一个示例:
import React, { useRef } from 'react';
import { Formik, Form, Field } from 'formik';
const MyForm = () => {
const formikRef = useRef();
const handleExternalSubmit = () => {
if (formikRef.current) {
formikRef.current.submitForm();
}
};
return (
<div>
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values) => {
console.log(values);
}}
innerRef={formikRef}
>
{({ isSubmitting }) => (
<Form>
<Field type="email" name="email" />
<Field type="password" name="password" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
<button onClick={handleExternalSubmit}>Submit from outside</button>
</div>
);
};
export default MyForm;
useRef
钩子来创建一个引用,指向Formik实例。innerRef
属性,这样你就可以通过这个引用来访问Formik实例。formikRef.current.submitForm()
来触发Formik的onSubmit
事件。通过这种方式,你可以从<Form>
组件外部触发Formik的onSubmit
事件。
领取专属 10元无门槛券
手把手带您无忧上云