React使用react-hook-form时父组件如何获取子组件的表单值

核心问题说明 #

• 子组件单独调用useForm()会生成独立的表单实例，和父组件的表单上下文完全隔离，子组件注册的字段父组件无法识别
• register方法传参错误，正确用法是直接传入字段名字符串，不需要包裹为对象
• 文件类型输入未添加valueAsFile: true配置，无法正确获取到上传的File实例

方案1：通过props传递register方法（适合简单嵌套场景） #

不需要额外引入API，直接将父组件的register方法传递给子组件即可：

子组件ImageUpload代码

export const ImageUpload = ({ register, imageName }) => {
  return <input 
    type='file' 
    id='single' 
    {...register(imageName, { valueAsFile: true })} 
  />        
}

父组件代码

// 父组件逻辑部分
const {register, handleSubmit} = useForm()
const onSubmit = async (data) => {
  console.log(data.username) // 普通输入框的值
  console.log(data.imgone) // 子组件上传的File对象
}

// 父组件渲染部分
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register('username')} />
  {/* 把父组件的register和字段名传给子组件 */}
  <ImageUpload register={register} imageName='imgone' />
  <Button type="submit"> Submit </Button>              
</form> 

方案2：通过FormContext共享表单实例（适合多层嵌套复杂表单） #

如果表单嵌套层级深，逐层传递props比较麻烦，可以用React Hook Form内置的上下文能力共享表单实例：

父组件代码

import { useForm, FormProvider } from 'react-hook-form'

// 父组件逻辑部分
const methods = useForm()
const onSubmit = async (data) => console.log(data)

// 父组件渲染部分，用FormProvider包裹整个表单
<FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(onSubmit)}>
    <input {...methods.register('username')} />
    {/* 不需要传递register，子组件自动从上下文获取 */}
    <ImageUpload imageName='imgone' />
    <Button type="submit"> Submit </Button>              
  </form> 
</FormProvider>

子组件ImageUpload代码

import { useFormContext } from 'react-hook-form'

export const ImageUpload = ({ imageName }) => {
  // 从全局上下文获取父组件的register方法
  const { register } = useFormContext()
  return <input 
    type='file' 
    id='single' 
    {...register(imageName, { valueAsFile: true })} 
  />        
}

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