在 Formik 中提交嵌套表单

Question

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

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

component_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>
</>

在 Formik 中提交嵌套表单

Submit nested form in Formik

javascript

forms

typescript

reactjs

formik