i øjeblikket har jeg den overordnede komponent og den underordnede komponent Dialog
med forskellige formik
form, den korte struktur, som er sådan
<Formik initialValues={...} onSubmit={...}> //some form fields here <Button type="submit" /> <Button onClick={()=>{setDialogOpen(true)}}/> <Dialog Open={dialogOpen}> </Formik> <Dialog> <Formik initialValues={...} onSubmit={...}> //some form fields here <Button type="submit" /> </Formik> </Dialog>
Af en eller anden grund kan jeg ikke tage Dialog
ud af det overordnede formik
, problemet er, når jeg klikker på børnenes indsend-knap, forældrenes formik
formular vil også blive udløst, hvordan kan jeg undgå dette?
Svar
Jeg vil tro, at indsend-knap-begivenheden bobler til toppen formik. Hvis du bruger formik-krogen useFormik
du kan derefter have to separate formularer og kalde indsend på hver knap:
import { useFormik } from 'formik'; const [parentForm] = useFormik(); const [dialogForm] = useFormik(); <Formik initialValues={...} onSubmit={...} form={parentForm}> //some form fields here <Button onClick={() => parentForm.submit()} /> <Button onClick={()=>{setDialogOpen(true)}}/> <Dialog Open={dialogOpen}> </Formik> <Dialog> <Formik initialValues={...} onSubmit={...} form={dialogForm}> //some form fields here <Button onClick={() => dialogForm.submit()} /> </Formik> </Dialog>