在 Formik 中提交嵌套表单

Question

我的问题是：在 formik 中，给定两个嵌套表单，我可以使用最外部的按钮调用这两个表单的 onSubmit 吗？

例如，我有一个结构如下的程序：

组件_A.tsx：

<Formik
initialValues={values}
onSubmit={(values) => doTheRightThing_A(values)}
>
{formik =>
        <Component B />

        <Button
        type="primary"
        onClick={formik.submitForm}
        >
            Save
        </Button>
}
</Formik>

和 component_B.tsx 有：

<Formik
initialValues={question: ''}
onSubmit={(values) => doTheRightThing_B(values)}
>
{formik =>
        <Field name="question" />
}
</Formik>

按保存按钮，我想同时运行 doTheRightThing_A 和 B。提前致谢！

Answer 1

是的，您可以，您所要做的就是将 Form B 的 formikConfig 分配给一个 ref。

const formikBRef = useRef();

const onSave = (values) => {
    (values) => doTheRightThing_A(values)
    formikBRef.current?.submitForm()
}

return </>
<Formik
    initialValues={values}
    onSubmit={onSave}
>
    {formik =>
        <Component B />
        <Button
            type="primary"
            onClick={formik.submitForm}
        >
            Save
        </Button>
    }
</Formik>

<Formik
    initialValues={question: ''}
    onSubmit={(values) => doTheRightThing_B(values)}
    innerRef={formikBRef}
>
    {formik =>
        <Field name="question" />
    }
</Formik>
</>