React中如何阻止文件上传时浏览器刷新？

我有一个简单的React文件上传组件：

import React, { useState } from 'react';
import { FlexContainer } from '@styles/FlexContainer';

const TestUpload = () => {
  const [file, setFile] = useState<File>();

  const onFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) return;

    setFile(event.target.files[0]);
  };

  return (
    <FlexContainer>
      <input
        type="file"
        onChange={onFileUpload}
        accept="image/*"
        capture="camera"
        id="fileFromCamera"
      />
      <input
        type="file"
        onChange={onFileUpload}
        accept="image/*"
        id="fileWithoutCamera"
      />
    </FlexContainer>
  );
};

export default TestUpload;

问题：移动设备上上传文件时，部署环境的应用会触发页面刷新并重新挂载，但localhost本地环境运行正常。尝试在根组件添加以下代码阻止页面卸载，没有效果，怀疑是WebPack配置问题：

useEffect(() => {
  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
    event.preventDefault();
  };
  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []);

排查与修复方案 #

• 检查表单默认提交行为
  确认组件是否被嵌套在未阻止默认提交的<form>标签中（比如全局布局里的表单）。若存在，文件上传时可能触发表单默认提交导致页面刷新。可以给包含input的父容器添加阻止提交的逻辑：

  <FlexContainer onSubmit={(e) => e.preventDefault()}>
    {/* 现有input代码 */}
  </FlexContainer>
  

• WebPack生产环境配置优化

  1. Terser压缩规则检查：生产环境下TerserPlugin的过度压缩可能破坏React事件处理逻辑。修改WebPack配置，确保Terser的compress选项保留必要的事件相关代码，例如：

     module.exports = {
       optimization: {
         minimizer: [
           new TerserPlugin({
             terserOptions: {
               compress: {
                 drop_console: true,
                 // 禁用可能影响事件的压缩选项
                 drop_debugger: false,
                 pure_funcs: []
               }
             }
           })
         ]
       }
     };
     

  2. publicPath配置验证：确认生产环境的output.publicPath设置正确，避免因资源路径错误触发页面刷新。建议使用相对路径./或匹配部署域名的绝对路径。
  3. 缓存插件临时禁用：若使用了HardSourceWebpackPlugin等缓存插件，尝试临时移除，排查是否因缓存不一致导致页面异常刷新。

• 移动设备特定行为处理

  1. 调整capture属性：带有capture="camera"的input在部分移动浏览器中存在兼容性问题，尝试移除该属性或添加multiple属性测试：

     <input
       type="file"
       onChange={onFileUpload}
       accept="image/*"
       id="fileFromCamera"
       multiple
     />
     

  2. 增强事件处理逻辑：在onFileUpload中添加阻止事件冒泡和默认行为的代码：

     const onFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
       event.preventDefault();
       event.stopPropagation();
       if (!event.target.files) return;
       setFile(event.target.files[0]);
     };
     

• SSR Hydration一致性检查
  若项目使用服务端渲染（SSR），检查生产环境下SSR输出的HTML与客户端Hydration后的DOM是否一致。不匹配的内容可能触发React重新挂载整个应用，进而导致页面刷新。

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