使用react-hook-form后FileUploader组件input ref失效问题求助

问题核心是Controller组件提供的表单字段ref未与input元素正确绑定，导致自定义useRef无法捕获DOM节点，同时React Hook Form也无法关联表单控件。以下是具体解决方法和代码示例：

方法一：直接在Controller的render中绑定ref #

若文件上传组件无需复用，可直接在Controller内部处理ref绑定：

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

function App() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="uploadedFile"
        control={control}
        render={({ field: { ref, onChange } }) => {
          const openFilePicker = () => {
            ref.current?.click();
          };

          return (
            <div>
              <button type="button" onClick={openFilePicker}>选择文件</button>
              <input
                type="file"
                ref={ref}
                style={{ display: 'none' }}
                onChange={(e) => onChange(e.target.files[0])}
              />
            </div>
          );
        }}
      />
      <button type="submit">提交</button>
    </form>
  );
}

方法二：封装可复用的FileUploader组件（使用forwardRef） #

若需要复用文件上传组件，用forwardRef将内部input的ref暴露给Controller：

import { forwardRef, useRef, useImperativeHandle } from 'react';
import { Controller, useForm } from 'react-hook-form';

// 可复用文件上传组件
const FileUploader = forwardRef(({ onChange }, ref) => {
  const inputRef = useRef(null);

  // 暴露input的触发方法给父组件ref
  useImperativeHandle(ref, () => ({
    openPicker: () => inputRef.current?.click()
  }));

  const handleButtonClick = () => {
    inputRef.current?.click();
  };

  return (
    <div>
      <button type="button" onClick={handleButtonClick}>选择文件</button>
      <input
        type="file"
        ref={inputRef}
        style={{ display: 'none' }}
        onChange={(e) => onChange(e.target.files[0])}
      />
    </div>
  );
});

function App() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="uploadedFile"
        control={control}
        render={({ field: { ref, onChange } }) => (
          <FileUploader ref={ref} onChange={onChange} />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

关键注意点 #

1. 必须绑定Controller提供的ref：Controller生成的ref用于关联表单字段，只有绑定到input元素，才能确保DOM节点被正确捕获，同时让React Hook Form追踪控件状态。
2. 正确传递文件数据：在input的onChange事件中，需将选中的文件（e.target.files[0]）传递给React Hook Form的onChange方法，保证表单能收集到文件数据。
3. 避免独立定义未关联的ref：不要单独使用useRef而不关联Controller的ref，这会导致ref无法捕获被Controller包裹的input元素。

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