如何从Custom Component触发表单submit函数？

问题根源 #

1. 事件参数缺失报错：你的sendEmail调用handleSubmit()时没传递事件对象，导致handleSubmit里的e.preventDefault()触发Cannot read properties of undefined (reading 'preventDefault')错误，函数直接中断，setIsDone(true)根本没执行。
2. 异步state更新的误区：就算上述问题修复，sendEmail里console.log("isDone", isDone)也会输出旧值——React的setState是异步操作，更新不会立即生效，要获取最新值得用useEffect监听。

修复方案 #

方案1：兼容handleSubmit的无参数调用

修改handleSubmit，先判断事件对象是否存在，再调用preventDefault：

const handleSubmit = (e) => {
  // 仅当e存在时执行preventDefault
  if (e) e.preventDefault();
  setIsDone(true);
  console.log("inputText", inputText);
};

同时，如果你想在sendEmail里看到最新的isDone，可以加个useEffect监听：

useEffect(() => {
  console.log("isDone updated to:", isDone);
}, [isDone]);

方案2：直接利用表单的提交机制（更简洁）

既然你的自定义组件按钮已经设置了type="submit"，其实可以不用额外的sendEmail函数，直接把handleSubmit绑定到表单的onSubmit事件上：

// App.js里修改form标签
<form onSubmit={handleSubmit}>
  <h1>Hello CodeSandbox</h1>
  <input type="text" onChange={onChangeHandler} value={inputText} />
  <CustomComp />
  <button type="submit">submit</button>
</form>

// CustomComp.js里去掉onClick，直接用表单的默认提交逻辑
const CustomComponent = () => {
  return (
    <div>
      <button type="submit">send email</button>
    </div>
  );
};

这种方式更符合HTML表单的原生逻辑，不用手动处理事件传递，更可靠。

修改后的完整代码示例（方案2） #

CustomComp.js

import React from "react";

const CustomComponent = () => {
  return (
    <div>
      <button type="submit">send email</button>
    </div>
  );
};

export default CustomComponent;

App.js

import { useState, useEffect } from "react";
import CustomComp from "./CustomComp";

export default function App() {
  const [isDone, setIsDone] = useState(false);
  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsDone(true);
    console.log("inputText", inputText);
  };

  useEffect(() => {
    console.log("isDone:", isDone);
  }, [isDone]);

  const onChangeHandler = (e) => {
    setInputText(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Hello CodeSandbox</h1>
      <input type="text" onChange={onChangeHandler} value={inputText} />
      <CustomComp />
      <button type="submit">submit</button>
    </form>
  );
}

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