React Formik将一个Formik表单插入父Formik表单

问题描述

目前，我有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表格，如何避免这种情况？

解决方法

我认为“提交”按钮事件冒泡到顶级形式。 如果您使用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>