如何用react-hook-form跨组件获取表单状态并实现双表单重置？

针对两个独立React Hook Form表单的联动需求，以下是两种实用的实现方案：

方案一：状态提升至共同父组件（最直接的实现方式） #

将两个表单的实例、脏状态（isDirty）和重置方法统一托管在它们的共同父组件中，通过props传递给子组件，实现状态共享与联动。

实现步骤： #

1. 在父组件中初始化两个表单实例，汇总脏状态并定义统一重置方法：

import { useForm } from 'react-hook-form';

const ParentComponent = () => {
  // 头部搜索表单实例
  const { 
    register: registerHeader, 
    formState: { isDirty: isHeaderDirty }, 
    reset: resetHeader 
  } = useForm({ defaultValues: { headerSearch: '' } });

  // 侧边栏筛选表单实例
  const { 
    register: registerSidebar, 
    formState: { isDirty: isSidebarDirty }, 
    reset: resetSidebar 
  } = useForm({ defaultValues: { filter1: '', filter2: '' } });

  // 任一表单脏则显示重置按钮
  const showResetBtn = isHeaderDirty || isSidebarDirty;

  // 统一重置两个表单
  const handleResetAll = () => {
    resetHeader();
    resetSidebar();
  };

  return (
    <>
      <HeaderSearchForm register={registerHeader} />
      <SidebarFilterForm 
        register={registerSidebar} 
        showResetBtn={showResetBtn} 
        onReset={handleResetAll} 
      />
    </>
  );
};

2. 头部搜索组件仅接收register方法渲染输入框：

const HeaderSearchForm = ({ register }) => {
  return (
    <input {...register('headerSearch')} placeholder="全局搜索..." />
  );
};

3. 侧边栏组件接收按钮显示状态和重置方法：

const SidebarFilterForm = ({ register, showResetBtn, onReset }) => {
  return (
    <div className="sidebar-filter">
      {showResetBtn && <button onClick={onReset}>清空所有筛选</button>}
      <input {...register('filter1')} placeholder="筛选条件1" />
      <input {...register('filter2')} placeholder="筛选条件2" />
    </div>
  );
};

优势：逻辑直观，无额外依赖，适合组件层级较浅的场景。

方案二：React Context封装表单逻辑（适配复杂组件树） #

如果两个表单所在组件层级较深，props传递会繁琐，可通过Context封装表单状态与方法，实现跨组件的状态共享。

实现步骤： #

1. 创建表单Context与Provider：

import { createContext, useContext, useForm } from 'react-hook-form';

const SearchFormContext = createContext(null);

export const SearchFormProvider = ({ children }) => {
  // 初始化两个表单实例
  const headerForm = useForm({ defaultValues: { headerSearch: '' } });
  const sidebarForm = useForm({ defaultValues: { filter1: '', filter2: '' } });

  // 汇总脏状态
  const showResetBtn = headerForm.formState.isDirty || sidebarForm.formState.isDirty;

  // 统一重置方法
  const resetAll = () => {
    headerForm.reset();
    sidebarForm.reset();
  };

  return (
    <SearchFormContext.Provider value={{
      headerForm,
      sidebarForm,
      showResetBtn,
      resetAll
    }}>
      {children}
    </SearchFormContext.Provider>
  );
};

// 自定义Hook简化Context调用
export const useSearchForm = () => useContext(SearchFormContext);

2. 在根组件或共同父组件中包裹Provider：

const App = () => {
  return (
    <SearchFormProvider>
      <HeaderSearchForm />
      <SidebarFilterForm />
    </SearchFormProvider>
  );
};

3. 头部搜索组件通过自定义Hook获取表单实例：

import { useSearchForm } from './SearchFormContext';

const HeaderSearchForm = () => {
  const { headerForm } = useSearchForm();
  const { register } = headerForm;

  return (
    <input {...register('headerSearch')} placeholder="全局搜索..." />
  );
};

4. 侧边栏组件通过自定义Hook获取按钮状态与重置方法：

import { useSearchForm } from './SearchFormContext';

const SidebarFilterForm = () => {
  const { sidebarForm, showResetBtn, resetAll } = useSearchForm();
  const { register } = sidebarForm;

  return (
    <div className="sidebar-filter">
      {showResetBtn && <button onClick={resetAll}>清空所有筛选</button>}
      <input {...register('filter1')} placeholder="筛选条件1" />
      <input {...register('filter2')} placeholder="筛选条件2" />
    </div>
  );
};

优势：避免props穿透，代码扩展性强，适合大型项目或复杂组件结构。

额外注意事项 #

• 若需更精准判断表单是否有有效输入（而非仅依赖isDirty），可结合React Hook Form的watch方法监听字段值，判断是否存在非空内容。
• 务必为两个表单设置正确的defaultValues，确保reset方法能准确恢复初始状态。

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