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

Question

目前，我有父组件和子组件Dialog 不同的formik 形式，简要结构是这样的

<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 钩子 useFormik 你可以有两个单独的表单并在每个按钮上调用提交：

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>