React中如何实现点击Div元素触发文件上传功能

该需求完全可以实现，不需要依赖复杂的第三方上传组件，通过隐藏原生文件输入框+触发点击的方案就能完成。

核心是把原生<input type="file">元素隐藏放在容器内，点击外层div时主动触发该输入框的点击行为，调起系统文件选择器，后续拿到选中文件走自定义上传逻辑即可：

• 给文件输入框设置hidden类或者display: none样式，避免占用页面布局空间，头像上传场景可加accept="image/*"属性限制仅可选择图片文件
• 通过React ref获取文件输入框的DOM实例，给外层div绑定点击事件，触发时调用输入框DOM的原生click()方法
• 给文件输入框绑定onChange事件，在事件回调里拿到用户选中的文件对象，执行后续上传流程
• 子元素（头像、右下角编辑图标）的点击事件会通过冒泡触发外层div的绑定事件，不需要单独给子元素重复绑定逻辑

import { useRef } from 'react';
// 保留你原有引入的Avatar、AiFillEdit组件即可

function AvatarUploadArea() {
  const fileInputRef = useRef(null);

  const triggerFileSelect = () => {
    fileInputRef.current?.click();
  };

  const handleFileSelect = (e) => {
    const uploadFile = e.target.files?.[0];
    if (!uploadFile) return;
    // 此处替换为你实际的文件上传接口逻辑
    console.log('待上传文件：', uploadFile);
    // 如果需要支持重复选择同一个文件触发上传，可放开下面这行重置输入框值
    // e.target.value = ''
  };

  return (
    <div 
      className="relative w-[150px] cursor-pointer"
      onClick={triggerFileSelect}
    >
      <input
        type="file"
        ref={fileInputRef}
        accept="image/*"
        className="hidden"
        onChange={handleFileSelect}
      />
      <Avatar className="mt-5" size="150" round={true} />
      <div className="rounded-full p-2 bg-white absolute bottom-0 right-0">
        <AiFillEdit className="text-blue-700" />
      </div>
    </div>
  );
}

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