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

Question

目前，我有 parent 组件和 children 组件 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>

出于某种原因，我无法从 parent formik 中取出 Dialog，问题是当我单击 children 的提交按钮时， parents' formik 表单也会被触发，如何避免？

Answer 1

我认为提交按钮事件冒泡到顶部 formik。如果你使用 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>

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

React Formik insert a formik form into parent formik form

javascript

reactjs

formik

formik-material-ui