如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。