如何在React中生成合法React.FormEvent以调用handleSubmit？

方案一：极简模拟（适合多数场景） #

如果你的handleSubmit仅执行提交逻辑，不依赖事件对象的复杂属性，只需构造包含核心方法和目标元素的对象，再通过类型断言转换为React.FormEvent<HTMLFormElement>即可：

import { useEffect, FormEvent } from 'react';

const YourComponent = () => {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // 你的表单提交逻辑
    console.log('执行提交');
  };

  useEffect(() => {
    // 构造模拟事件，包含必要的preventDefault方法和表单元素
    const mockEvent = {
      preventDefault: () => {},
      target: document.createElement('form'),
      currentTarget: document.createElement('form')
    } as unknown as FormEvent<HTMLFormElement>;

    handleSubmit(mockEvent);
  }, []);

  return <form onSubmit={handleSubmit}>{/* 表单内容 */}</form>;
};

方案二：完整模拟合成事件（需用到复杂属性时） #

如果handleSubmit中用到了isDefaultPrevented、stopPropagation等React合成事件特有的方法，可以模拟完整的合成事件结构：

import { useEffect, FormEvent } from 'react';

const createMockFormEvent = (): FormEvent<HTMLFormElement> => {
  const form = document.createElement('form');
  let defaultPrevented = false;
  let propagationStopped = false;

  return {
    target: form,
    currentTarget: form,
    preventDefault: () => {
      defaultPrevented = true;
    },
    isDefaultPrevented: () => defaultPrevented,
    stopPropagation: () => {
      propagationStopped = true;
    },
    isPropagationStopped: () => propagationStopped,
    nativeEvent: new Event('submit', { bubbles: true }),
    // 按需添加其他需要的合成事件属性
  } as unknown as FormEvent<HTMLFormElement>;
};

const YourComponent = () => {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (e.isDefaultPrevented()) {
      console.log('默认提交行为已阻止');
    }
    // 你的表单提交逻辑
  };

  useEffect(() => {
    const mockEvent = createMockFormEvent();
    handleSubmit(mockEvent);
  }, []);

  return <form onSubmit={handleSubmit}>{/* 表单内容 */}</form>;
};

原代码失效原因 #

你之前的代码直接用原生Event转换为React.FormEvent，但React的表单事件是合成事件（SyntheticEvent），和原生事件结构不同：

• 缺少React合成事件特有的方法（如isDefaultPrevented），如果handleSubmit调用这些方法会报错；
• 给表单元素添加value属性无意义，表单本身没有value属性，值来自内部的输入控件。

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