react-hook-form隐藏嵌套的自定义file输入点击不触发选择弹窗问题

问题核心原因 #

你当前代码存在以下几个关键错误导致无法触发文件选择框，且表单值无法同步：

• 未给隐藏的<input type="file"/>声明ref引用，无法通过ref触发点击事件
• Controller和register功能混用，使用FormProvider场景下不需要给子组件传递register返回值
• 自定义onChange直接覆盖了Controller提供的field.onChange，导致选中的文件无法同步到react-hook-form的表单状态
• ImageInput组件未获取到上层的control实例，Controller的control属性为空
• 原生input上写的control属性是无效属性，无任何作用

修复步骤 #

1. 调整ImageInput组件 #

引入useRef绑定文件输入框，通过useFormContext获取上层传递的表单上下文，同时在自定义文件变化回调里调用Controller提供的onChange同步表单值：

import { useRef, useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import Button from '@mui/material/Button'; // 按你实际的Button引入路径调整

const ImageInput = ({ name }) => {
  const [selectedImage, setSelectedImage] = useState();
  const fileInputRef = useRef(null);
  const { control } = useFormContext(); // 从上层FormProvider拿control

  const pickImageHandler = () => {
    // 调用ref的click触发文件选择
    fileInputRef.current?.click();
  };

  const imageChange = (e, fieldOnChange) => {
    console.log("imageChange onChange triggered");
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      setSelectedImage(file);
      // 同步文件值到react-hook-form表单
      fieldOnChange(file);
    }
  };

  return (
    <>
      <Controller
        control={control}
        name={name} // 直接用传进来的name关联字段
        render={({ field }) => (
          <input
            ref={fileInputRef} // 绑定ref
            type="file"
            accept=".jpg,.png,.jpeg"
            style={{ display: "none" }}
            onChange={(e) => imageChange(e, field.onChange)}
            // 保留field的其他属性，不要全量覆盖
            name={field.name}
            onBlur={field.onBlur}
          />
        )}
      />
      <Button
        type="button"
        variant="contained"
        className={classes.pickImageButton}
        onClick={pickImageHandler}
      >
        Add Image
      </Button>
    </>
  );
};

2. 调整PostForm组件 #

移除给ImageInput传递的register返回值，仅保留name属性，同时修正表单闭合标签、onSubmit绑定逻辑：

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

const PostForm = (props) => {
  const methods = useForm(); // 声明methods实例

  const submitFunction = async (data) => {
    // 这里的data.cardImage就是你选中的文件对象，直接用FormData携带即可
    const formData = new FormData();
    formData.append('cardImage', data.cardImage);
    // 后续提交逻辑
  };

  return (
    <form onSubmit={methods.handleSubmit(submitFunction)}>
      <FormProvider {...methods}>
        <ImageInput name="cardImage" />
      </FormProvider>
      <Button type="submit" className={classes.postButton}>
        Post
      </Button>
    </form>
  );
};

验证逻辑 #

修复后点击Add Image按钮就会正常弹出文件选择框，选中文件后会自动同步到react-hook-form的表单状态中，提交时可以直接从data里拿到选中的文件对象。

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