React文件上传表单onSubmit事件处理函数未触发求助

问题根源 #

1. onSubmit绑定逻辑错误：你用箭头函数包裹handleSubmit时未传递事件对象event，导致event.preventDefault()无法生效；同时，文件选择操作本身不会自动触发表单的submit事件，需要手动触发。
2. 缺少提交触发逻辑：文件选择完成后（onChange触发），没有主动提交表单的操作，所以onSubmit回调始终不会被执行。

修复后的代码 #

React组件代码 #

import { useRef } from 'react';

const FileUploadForm = () => {
  const fileInputRef = useRef(null);
  const formRef = useRef(null); // 新增表单引用

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("HEY");
    // 此处可添加文件上传逻辑，比如通过fileInputRef.current.files获取选中文件
  };

  const handleFileSelect = () => {
    // 文件选择完成后手动触发表单提交
    formRef.current.submit();
  };

  return (
    <form
      ref={formRef} // 绑定表单引用
      method="POST"
      action="/"
      encType="multipart/form-data"
      onClick={() => fileInputRef.current.click()}
      onSubmit={handleSubmit} // 直接绑定处理函数，无需箭头函数包裹
    >
      <label>
        <input
          ref={fileInputRef}
          onChange={handleFileSelect} // 直接绑定处理函数
          multiple
          className="picker-input"
          type="file"
          accept=".pdf"
        />
      </label>
    </form>
  );
};

export default FileUploadForm;

CSS代码（保持原有样式不变） #

form {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  cursor: pointer;
  input {
     position: absolute;
     width: 1px;
     height: 1px;
     border: 0px;
     padding: 0px;
     overflow: hidden;
  }
}

关键修复说明 #

• 修正onSubmit绑定：将onSubmit={() => handleSubmit()}改为onSubmit={handleSubmit}，确保事件对象event能正常传递到处理函数，保证event.preventDefault()生效。
• 手动触发表单提交：给表单添加ref，在文件选择完成的handleFileSelect中调用formRef.current.submit()，主动触发表单提交，让onSubmit回调执行。
• 简化事件绑定：onChange直接绑定handleFileSelect，去掉不必要的箭头函数包裹，提升代码可读性。

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