如何在react-final-form的两个表单实例间共享表单值？

核心思路是通过父组件维护共享的表单状态，同步两个独立子表单的字段值，具体实现步骤如下：

1. 父组件维护共享状态并传递给子表单 #

父组件中声明共享的表单值状态，将其作为initialValues传递给两个子表单，同时传递状态更新方法，让子表单能触发状态同步。

import { useState } from "react";
import SubForm from "./SubForm";

export default function ParentComponent() {
  const [sharedValues, setSharedValues] = useState({
    morningTea: "",
    // 其他需要同步的字段
  });

  // 处理子表单的字段变更，同步到共享状态
  const handleFormChange = (values) => {
    setSharedValues(prev => ({ ...prev, ...values }));
  };

  return (
    <div>
      <SubForm
        initialValues={sharedValues}
        onFormChange={handleFormChange}
        formKey="form1"
      />
      <SubForm
        initialValues={sharedValues}
        onFormChange={handleFormChange}
        formKey="form2"
      />
    </div>
  );
}

2. 子表单组件实现同步逻辑 #

子表单中，通过useEffect监听父组件传递的initialValues变化，一旦共享状态更新，就调用react-final-form的form.change()方法更新当前表单的对应字段；同时在Form组件的onChange回调中，将字段变化同步回父组件的共享状态。

import { Form, Field } from "react-final-form";
import { useEffect, useRef } from "react";

export default function SubForm({ initialValues, onFormChange, formKey }) {
  const formRef = useRef(null);
  // 标记是否是当前表单触发的变更，避免无限循环
  const isSelfChange = useRef(false);

  // 监听共享状态变化，同步到当前表单
  useEffect(() => {
    if (!isSelfChange.current && formRef.current) {
      Object.entries(initialValues).forEach(([name, value]) => {
        formRef.current.change(name, value);
      });
    }
    isSelfChange.current = false;
  }, [initialValues]);

  return (
    <Form
      initialValues={initialValues}
      onSubmit={() => {}} // 根据实际需求实现提交逻辑
      onChange={(values) => {
        isSelfChange.current = true;
        onFormChange(values);
      }}
      render={({ form }) => {
        formRef.current = form;
        return (
          <form>
            <div>
              <label>Morning Tea:</label>
              <Field name="morningTea" component="input" type="text" />
            </div>
            {/* 其他字段 */}
          </form>
        );
      }}
    />
  );
}

关键细节说明 #

• 避免无限循环：使用isSelfChange标记当前变更是否来自子表单自身，这样当父组件同步状态回来时，不会再次触发子表单的onChange，形成循环。
• 精准同步：如果只需要同步特定字段（比如仅morningTea），可以在useEffect和onChange中只处理该字段，减少不必要的更新。
• 表单独立性：两个表单依然保持独立的验证、提交逻辑，只是共享指定字段的实时值。

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