如何融合两个Formik表单，实现提交外层表单时同时提交两者？

需求说明 #

• FormikA包含firstName、lastName字段，自带提交按钮
• FormikB包含x、y、z字段，无提交按钮，需根据这三个字段计算出a、b值
• FormikA嵌入FormikB，提交FormikA时需一并提交firstName、lastName、a、b
• FormikB需支持嵌入多个父表单（如FormikC、FormikE），不能与特定父表单强绑定

问题 #

直接嵌套Formik实例时，外层Formik无法感知内层Formik的字段值，无法实现需求中的值同步与提交逻辑。

实现方案 #

核心思路是不创建嵌套的Formik实例，让子组件（FormikB）通过Formik的useFormikContext钩子共享父表单的上下文，内部维护临时字段并实时计算结果同步到父表单，保证复用性的同时避免强依赖。

1. 封装可复用的FormikB组件 #

该组件不初始化自己的Formik实例，而是获取父表单的上下文，监听字段变化并计算目标值：

import { useFormikContext, Field } from 'formik';
import { useEffect } from 'react';

// 自定义计算a、b的逻辑，可按需修改
const calculateAB = (x, y, z) => {
  return {
    a: Number(x) + Number(y),
    b: Number(y) * Number(z)
  };
};

export function FormikB() {
  const { values, setFieldValue } = useFormikContext();

  // 监听x、y、z变化，实时更新父表单的a、b值
  useEffect(() => {
    const { x, y, z } = values;
    if (x && y && z) {
      const { a, b } = calculateAB(x, y, z);
      setFieldValue('a', a);
      setFieldValue('b', b);
    }
  }, [values.x, values.y, values.z, setFieldValue]);

  return (
    <div style={{ border: '1px solid #ccc', padding: '1rem', margin: '1rem 0' }}>
      <h3>FormikB 子表单</h3>
      <Field name="x" placeholder="输入x" type="number" />
      <br />
      <Field name="y" placeholder="输入y" type="number" />
      <br />
      <Field name="z" placeholder="输入z" type="number" />
    </div>
  );
}

2. 在FormikA中嵌入FormikB #

父表单只需初始化所有必要字段（包括FormikB用到的x、y、z和要提交的a、b），直接引入FormikB即可：

import { Formik, Form, Field, Button } from 'formik';
import { FormikB } from './FormikB';

export function FormikA() {
  return (
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        x: '',
        y: '',
        z: '',
        a: '',
        b: ''
      }}
      onSubmit={(values) => {
        // 提交时筛选需要的字段
        const submitData = {
          firstName: values.firstName,
          lastName: values.lastName,
          a: values.a,
          b: values.b
        };
        console.log('FormikA提交数据:', submitData);
        // 执行实际提交逻辑
      }}
    >
      <Form>
        <h2>FormikA 主表单</h2>
        <Field name="firstName" placeholder="First Name" />
        <br />
        <Field name="lastName" placeholder="Last Name" />
        <br />

        {/* 嵌入FormikB子表单 */}
        <FormikB />

        <Button type="submit">提交</Button>

        <pre style={{ marginTop: '1rem' }}>
          当前表单值: {JSON.stringify(values, null, 2)}
        </pre>
      </Form>
    </Formik>
  );
}

3. 在其他父表单中复用FormikB #

比如FormikC，只需在初始化值中包含x、y、z、a、b，直接嵌入FormikB即可，无需修改子组件代码：

import { Formik, Form, Field, Button } from 'formik';
import { FormikB } from './FormikB';

export function FormikC() {
  return (
    <Formik
      initialValues={{
        email: '',
        x: '',
        y: '',
        z: '',
        a: '',
        b: ''
      }}
      onSubmit={(values) => {
        const submitData = {
          email: values.email,
          a: values.a,
          b: values.b
        };
        console.log('FormikC提交数据:', submitData);
      }}
    >
      <Form>
        <h2>FormikC 主表单</h2>
        <Field name="email" placeholder="Email" type="email" />
        <br />

        <FormikB />

        <Button type="submit">提交</Button>
      </Form>
    </Formik>
  );
}

方案优势 #

• 避免嵌套Formik实例带来的上下文隔离问题，父表单能直接获取子组件的计算结果
• FormikB完全无耦合，可无缝嵌入任意Formik父表单
• 实时计算同步，用户输入时自动更新目标值，无需额外触发操作

内容的提问来源于stack exchange，提问作者codingChicken