React Formik将formik表单插入父formik表单

Question

目前，我有不同formik形式的父组件和子组件Dialog，其简要结构如下

<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>

由于某些原因，我不能将Dialog从父formik中删除，问题是当我单击孩子的提交按钮时，父母的formik表单也会被触发，我如何避免这种情况？

Answer 1

我会认为提交按钮事件正在冒泡到顶部的formik。如果使用formik钩子useFormik，则可以拥有两个单独的表单，并在每个按钮上调用submit：

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>