如何在React Hook Form中动态组合多个handleSubmit方法？

问题场景 #

在组件中使用多个useForm钩子，希望通过单个提交按钮处理任意数量的表单，实现依次验证（前一个表单验证通过后才进行下一个，全部通过后执行最终成功逻辑）。

手动嵌套handleSubmit的方式可正常工作：

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

const MyFormComponent = () => {
   const form1 = useForm();
   const form2 = useForm();

   const onSubmitSuccess = () => {
      // 成功逻辑
   };

   // 手动嵌套：先验证form1，通过后验证form2，最后执行成功逻辑
   const handleMultiple = form1.handleSubmit(form2.handleSubmit(onSubmitSuccess));

   return (
      <>
         {/* form1字段 */}
         {/* form2字段 */}
         <button onClick={handleMultiple}>提交</button>
      </>
   )
}

但使用redux的compose封装通用方法时，验证逻辑会被忽略，即使添加useMemo也无法解决：

// 无效的通用方法
import { compose } from 'redux'

const getHandleMultiple = (submitFunc, ...forms) => {
   const handleMultiple = compose(
      ...forms.map(form => form.handleSubmit),
      submitFunc
   );
   return { handleMultiple }
}

// 加useMemo仍无效的版本
const useComposedFormSubmit = (submitFunc, ...forms) => {
    const handleComposedSubmit = useMemo(() => {
        return compose(
            ...forms.map(form => form.handleSubmit), 
            submitFunc
        )
    }, [forms, submitFunc])
    return { handleComposedSubmit }
}

问题原因 #

• react-hook-form的handleSubmit是柯里化函数，调用逻辑为handleSubmit(onSuccess)返回一个提交处理函数，触发时先验证表单，通过后才执行onSuccess。
• redux的compose是从右到左执行函数组合，而我们需要从左到右按表单顺序依次验证，顺序颠倒会破坏handleSubmit的参数传递逻辑，导致验证失效。

可行解决方案 #

方案1：自定义顺序组合工具函数 #

用Array.reduceRight实现按表单顺序嵌套handleSubmit，和手动嵌套逻辑完全一致：

const composeFormSubmits = (finalSubmit, ...forms) => {
  // 从右往左嵌套，实现form1.handleSubmit(form2.handleSubmit(finalSubmit))的效果
  return forms.reduceRight((nextSubmit, form) => {
    return form.handleSubmit(nextSubmit)
  }, finalSubmit)
}

// 组件中使用示例
const MyFormComponent = () => {
  const form1 = useForm();
  const form2 = useForm();
  const form3 = useForm();

  const onSubmitSuccess = () => {
    console.log('所有表单验证通过！')
  };

  // 按form1 → form2 → form3的顺序验证
  const handleMultiple = composeFormSubmits(onSubmitSuccess, form1, form2, form3);

  return (
    <>
      {/* 各表单字段 */}
      <button onClick={handleMultiple}>提交所有表单</button>
    </>
  )
}

方案2：封装带缓存的自定义Hook #

如果需要在多个组件复用，用useMemo缓存组合后的提交函数，避免重复创建：

import { useMemo } from 'react'

const useComposedFormSubmit = (finalSubmit, ...forms) => {
  const handleComposedSubmit = useMemo(() => {
    return forms.reduceRight((next, form) => form.handleSubmit(next), finalSubmit)
  }, [finalSubmit, ...forms])

  return { handleComposedSubmit }
}

// 组件中使用示例
const MyFormComponent = () => {
  const form1 = useForm();
  const form2 = useForm();

  const onSubmitSuccess = () => {
    // 成功逻辑
  };

  const { handleComposedSubmit } = useComposedFormSubmit(onSubmitSuccess, form1, form2);

  return (
    <>
      {/* 表单字段 */}
      <button onClick={handleComposedSubmit}>提交</button>
    </>
  )
}

方案3：手动控制验证流程（更灵活） #

如果需要自定义错误处理、中途终止验证等精细控制，可调用每个表单的trigger方法手动验证：

const MyFormComponent = () => {
  const form1 = useForm();
  const form2 = useForm();

  const handleSubmit = async () => {
    // 验证form1，不通过则终止
    const form1Valid = await form1.trigger();
    if (!form1Valid) return;

    // 验证form2，不通过则终止
    const form2Valid = await form2.trigger();
    if (!form2Valid) return;

    // 所有表单验证通过，执行成功逻辑
    console.log('验证通过，表单数据：', {
      form1: form1.getValues(),
      form2: form2.getValues()
    })
  };

  return (
    <>
      {/* 表单字段 */}
      <button onClick={handleSubmit}>提交</button>
    </>
  )
}

该方案优势：可自定义每个表单的错误处理逻辑，灵活控制验证流程，同时能直接获取各表单数据。

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