在 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

是的，您可以，您所要做的就是将表单 B 的 formikConfig 分配给引用。

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>
  </>
);