React中onSubmit为何需传递函数名而非直接调用函数？

先看你的正确代码：

function Form() {
   const [text, setText] = useState("");
   function handleSubmission(e) {
      e.preventDefault();
   }

   return (
      <form className="the-form" onSubmit={handleSubmission}>
       ....
      </form>
   );
}

核心区别：函数引用 vs 函数执行 #

• 写onSubmit={handleSubmission}时，你传递的是函数的引用——React会在表单提交事件触发的瞬间，才调用这个函数。
• 但如果写成onSubmit={handleSubmission()}，这是直接执行函数，而且是在组件渲染的当下就立刻跑一遍，和提交事件完全无关。

这么写会带来的问题 #

1. 渲染时自动执行：组件每次渲染（比如state更新、父组件重渲染），这个函数都会被调用一次，完全违背了你“提交时才执行”的预期。
2. 丢失事件参数：React没法把提交事件的e对象传递给直接执行的函数，会导致e.preventDefault()这类代码报错。
3. 无效的事件绑定：如果handleSubmission没有返回另一个函数，那你传给onSubmit的是函数的返回值（通常是undefined），事件触发时React找不到可执行的函数，自然没反应。

要传额外参数怎么办？ #

如果需要给事件处理函数加自定义参数，可以用箭头函数包裹：

<form onSubmit={(e) => handleSubmission(e, 你的额外参数)}>

这样只有在提交事件触发时，箭头函数才会执行，进而调用handleSubmission并传递所需参数。

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