如何在React的useEffect钩子中触发表单提交？

有两种可行的方式在useEffect中触发表单提交：

方法一：拆分提交逻辑（推荐） #

把表单提交的核心代码从handleSubmit中抽离成独立函数，这样不管是表单原生提交触发，还是useEffect监听变量变化触发，都能直接调用这个核心函数，不需要依赖事件对象。

父组件修改： #

import { useState } from "react";
import Foo from "./Foo";

export default function ParentComponent() {
  // 抽离核心提交逻辑
  async function submitForm() {
    // 这里放原来handleSubmit里的业务代码，比如接口请求、数据处理等
    console.log("表单提交中...");
  }

  // 原handleSubmit只负责阻止默认行为并调用核心逻辑
  async function handleSubmit(e) {
    e.preventDefault();
    await submitForm();
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* 把核心提交函数传给Foo组件 */}
      <Foo submitForm={submitForm} />
    </form>
  );
}

Foo组件修改： #

import { useEffect, useState } from "react";

export function Foo({ submitForm }) {
  // 注意：useState的正确写法是数组解构，不是对象解构
  const [mediaBlob, setMediaBlob] = useState(null);

  useEffect(() => {
    if (mediaBlob) {
      // 直接调用核心提交函数
      submitForm();
    }
  }, [mediaBlob, submitForm]);

  // ...其他组件代码
}

方法二：模拟事件对象 #

如果不想拆分逻辑，可以创建一个包含preventDefault方法的模拟事件对象，传给handleSubmit。因为在useEffect中调用时本来就没有浏览器默认的表单提交行为，所以模拟的preventDefault方法不需要做任何事情。

Foo组件修改： #

import { useEffect, useState } from "react";

export function Foo({ handleSubmit }) {
  const [mediaBlob, setMediaBlob] = useState(null);

  useEffect(() => {
    if (mediaBlob) {
      // 模拟事件对象
      const mockEvent = {
        preventDefault: () => {}
      };
      // 调用handleSubmit
      handleSubmit(mockEvent);
    }
  }, [mediaBlob, handleSubmit]);

  // ...其他组件代码
}

注意点： #

• 你原来的代码中let { mediaBlob, setMediaBlob } = useState(null)是错误的，useState返回的是数组，必须用数组解构：const [mediaBlob, setMediaBlob] = useState(null)。
• 方法一的代码结构更清晰，也更符合React的最佳实践，优先推荐使用。

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