React中点击上传按钮后无法重置文件选择的问题求助

你的代码核心问题出在submit函数的写法上，同时忽略了表单默认提交行为的阻止，导致重置文件输入框的操作失效。

具体问题点 #

1. submit函数结构错误：你在函数里写了一个无用的箭头函数，导致uploadFiles()根本没有被调用；
2. 未阻止表单默认提交：点击按钮后表单会默认刷新页面，即使执行了重置操作也会被页面刷新覆盖；
3. 状态未同步清空：只重置输入框DOM，但files状态没有清空，会导致下次选择相同文件时onChange事件不触发。

修复后的代码 #

import React, { useRef, useState } from "react"
import useUploader from "../hooks/Uploader"

function UploadPhotos() {
  const [files, setFiles] = useState()
  const fname = useRef(null)
  const [uploadFiles] = useUploader(files)

  const filechangeHandler = (e) => {
    setFiles(e.target.files)
  }
  
  const submit = async (e) => {
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    
    if (!files) return;
    
    try {
      // 若uploadFiles是异步操作，用await等待上传完成
      await uploadFiles();
    } catch (err) {
      console.error("上传失败:", err);
    } finally {
      // 重置文件输入框
      if (fname.current) {
        fname.current.value = "";
        // 同步清空状态
        setFiles(null);
      }
    }
  }

  return (
    <div className=" font-Montserrat text-md absolute flex h-[80%] w-full items-center justify-center gap-5">
      <form id="data_upload">
        <input type="file" multiple onChange={filechangeHandler} ref={fname} />
        <button onClick={submit}>click here to upload</button>
      </form>
    </div>
  )
}

export default UploadPhotos

关键说明 #

• 用e.preventDefault()阻止表单默认提交行为，是确保重置操作生效的前提；
• 同时清空files状态，避免因选择相同文件时onChange事件不触发的问题；
• 如果uploadFiles不是异步函数，可以去掉async/await，直接调用后执行重置逻辑即可；
• 用value=""重置输入框和value=null效果一致，但兼容性更好。

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