React Hook Form自定义文件上传组件：预览与校验兼容问题

问题原因 #

1. 组件中硬编码了setValue的字段名"image"，但表单字段的实际名称是通过name属性传入的，字段名不匹配导致表单状态未正确更新。
2. 使用register后直接覆盖了onChange事件，React Hook Form内置的字段更新逻辑未触发，表单无法感知文件已上传，因此验证判定字段为空。
3. 未清理URL.createObjectURL创建的对象URL，会造成内存泄漏。

方案一：修改现有组件，兼容register的onChange #

调整组件逻辑，在自定义onChange中同时触发React Hook Form的字段更新：

const Uploader = (props) => {
  const [selectedFile, setSelectedFile] = useState()
  const [preview, setPreview] = useState()

  const { register, name, label, rules } = props;
  // 解构register返回的属性，单独取出内置onChange
  const { onChange: rhfOnChange, ...restRegister } = register(name, rules);

  useEffect(() => {
    if (!selectedFile) {
      setPreview(undefined)
      return
    }

    const objectUrl = URL.createObjectURL(selectedFile)
    setPreview(objectUrl)

    // 清理对象URL，避免内存泄漏
    return () => URL.revokeObjectURL(objectUrl)
  }, [selectedFile])

  const onSelectFile = (e) => {
    if (!e.target.files || e.target.files.length === 0) {
      setSelectedFile(undefined)
      // 通知React Hook Form清空字段
      rhfOnChange(e)
      return
    }
    const file = e.target.files[0]
    setSelectedFile(file)
    // 先触发React Hook Form的字段更新逻辑
    rhfOnChange(e)
  }

  return (
    <div className="imageUpload">
      <label htmlFor={name}>{label}</label>
      <input
        {...restRegister}
        id={name}
        name={name}
        type="file"
        accept=".jpg,.png,.jpeg"
        onChange={onSelectFile}
      />
      {selectedFile && (
        <div className="imageUploadPreview">
          <img className="imageUploadPreview" src={preview} alt="Preview of a Picture" />
        </div>
      )}
    </div>
  );
}

使用组件时无需传递setValue，保持原有调用逻辑即可：

<Uploader
  name="image"
  id="image"
  label="Pick an Image"
  register={register}
  errors={errors}
  rules={{
    required: "This field is required!"
  }}
/>

方案二：使用React Hook Form的Controller组件（推荐） #

Controller是React Hook Form专为自定义组件设计的API，能更优雅地处理表单状态与自定义逻辑的绑定：

改写Uploader组件 #

const Uploader = (props) => {
  const [selectedFile, setSelectedFile] = useState()
  const [preview, setPreview] = useState()

  const { field, label } = props;
  // field包含value、onChange、name等React Hook Form绑定属性

  useEffect(() => {
    if (!selectedFile) {
      setPreview(undefined)
      return
    }

    const objectUrl = URL.createObjectURL(selectedFile)
    setPreview(objectUrl)

    return () => URL.revokeObjectURL(objectUrl)
  }, [selectedFile])

  const onSelectFile = (e) => {
    if (!e.target.files || e.target.files.length === 0) {
      setSelectedFile(undefined)
      field.onChange(null) // 通知表单清空字段
      return
    }
    const file = e.target.files[0]
    setSelectedFile(file)
    field.onChange(file) // 将文件同步到表单状态
  }

  return (
    <div className="imageUpload">
      <label htmlFor={field.name}>{label}</label>
      <input
        id={field.name}
        name={field.name}
        type="file"
        accept=".jpg,.png,.jpeg"
        onChange={onSelectFile}
      />
      {selectedFile && (
        <div className="imageUploadPreview">
          <img className="imageUploadPreview" src={preview} alt="Preview of a Picture" />
        </div>
      )}
    </div>
  );
}

父组件中用Controller引入Uploader #

import { Controller } from "react-hook-form";

// ...

<Controller
  name="image"
  control={control} // control来自useForm的返回值
  rules={{
    required: "This field is required!"
  }}
  render={({ field, fieldState: { error } }) => (
    <Uploader
      field={field}
      label="Pick an Image"
      error={error}
    />
  )}
/>

关键注意事项 #

• 始终使用组件接收的name属性作为表单字段名，避免硬编码，提升组件复用性。
• 必须清理URL.createObjectURL创建的对象URL，防止内存泄漏。
• 若自定义组件逻辑复杂，优先使用Controller组件，它能更好地与React Hook Form的表单状态管理集成。

内容的提问来源于stack exchange，提问作者Максим