Reager Formik indsæt en formik-form i den overordnede formik-form

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>