React项目中input type="file"在Chrome无法触发文件选择弹窗问题

以下是几个针对性的排查和解决方向：

• 检查Chrome文件访问权限
  进入Chrome设置 → 隐私和安全 → 网站设置 → 文件和文件夹，确认当前站点被允许请求访问文件。部分情况下Chrome会默认限制非HTTPS本地站点的文件访问权限。

• 排查浏览器扩展干扰
  广告拦截、隐私防护类扩展可能会拦截文件选择弹窗。先切换到Chrome无痕模式测试，如果问题消失，再逐个禁用已安装的扩展定位问题。

• 手动触发input点击事件
  若input存在样式隐藏或层级导致的点击失效问题，可以用按钮代理触发：

import { useRef } from 'react';

// 组件内部逻辑
const fileInputRef = useRef(null);

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

return (
  <>
    <input
      type="file"
      ref={fileInputRef}
      style={{ display: 'none' }}
      onChange={e => setPhoto(e.currentTarget.files[0])}
    />
    <button onClick={handleSelectPhoto}>选择图片</button>
  </>
);

• 关闭React严格模式测试
  项目中启用的React Strict Mode可能引发一些事件异常。临时移除index.js中<React.StrictMode>的包裹，重新启动项目看问题是否消失。

• 清除Chrome站点缓存
  打开Chrome开发者工具 → 应用 → 存储 → 点击「清除站点数据」，清除当前项目的缓存和存储数据后重启浏览器重试。

• 检查CSS样式冲突
  在Chrome开发者工具中查看input元素的样式，确认没有设置pointer-events: none，也没有被其他元素（如透明遮罩）完全覆盖导致无法接收点击事件。

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