React Hook Form如何实现跨组件的表单输入值同步复制

核心实现思路是将共享状态提到两个表单组件的公共父层维护，通过props透传状态和回调实现跨组件同步，不需要引入额外的状态管理库。

实现步骤 #

1. 父组件维护共享状态 #

• 在两个表单的公共父组件中声明两个状态：isSyncEnabled 控制是否开启表单同步开关，formOneValues 存储FormOne组件的实时表单值
• 给FormOne组件传递值变化回调，每次FormOne表单更新时，将最新值同步到父组件的formOneValues中

2. FormOne组件监听值变化 #

用React Hook Form的watch方法监听表单值变化，触发父组件传进来的回调同步值，示例代码：

// FormOne 组件内部
import { useForm, useEffect } from 'react-hook-form';

type FormFieldType = {
  // 这里定义你的表单字段类型
};
const FormOne = (props: { onValuesChange: (val: FormFieldType) => void }) => {
  const { watch } = useForm<FormFieldType>();
  const allFormValues = watch();

  useEffect(() => {
    props.onValuesChange(allFormValues);
  }, [allFormValues, props.onValuesChange]);

  // 剩余表单渲染逻辑
}

3. FormTwo组件实现同步逻辑 #

从父组件获取同步开关状态和FormOne的实时值，开关开启时直接批量更新自身表单，示例代码：

// FormTwo 组件内部
import { useForm, useEffect } from 'react-hook-form';

type FormFieldType = {
  // 和FormOne的字段类型保持完全一致
};
const FormTwo = (props: { isSyncEnabled: boolean, syncSourceValues: FormFieldType }) => {
  const { reset, register } = useForm<FormFieldType>();

  useEffect(() => {
    if (props.isSyncEnabled) {
      // 同步开关打开时，直接用FormOne的值覆盖当前表单
      reset(props.syncSourceValues);
    }
  }, [props.isSyncEnabled, props.syncSourceValues, reset]);

  // 剩余表单渲染逻辑，如果需要同步时禁用输入，给表单项加disabled={props.isSyncEnabled}即可
}

注意事项 #

• 两个表单的字段名必须完全一致，否则批量赋值会出现错位
• 如果不需要同步全部字段，watch可以指定要监听的字段数组，减少不必要的重渲染
• 同步开关关闭后的逻辑可自行调整：可以保留用户修改后的值，也可以清空FormTwo的所有输入

内容的提问来源于stack exchange，提问作者L.Diaz