javascript - 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从 parent 中取出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>