React模板中无法直接调用submit方法的原因及报错解析

先看你代码里的问题：你写的onClick={submit(event)}，这不是给按钮绑定点击事件处理函数，而是组件一渲染就立刻执行了submit函数，而且这里的event是浏览器遗留的全局window.event（已经被标准废弃），所以TypeScript才会抛出：

'event' is deprecated.ts(6385)
Unexpected use of 'event'.

底层逻辑拆解：

• React事件绑定的规则：JSX中的onClick属性必须接收一个函数引用——意思是只有当用户点击按钮时，React才会调用这个函数。如果你写的是submit(event)这种函数调用语句，组件渲染阶段就会直接执行它，完全不符合点击触发的预期。
• 事件参数的传递逻辑：React的合成事件系统会在事件触发时，自动把合成事件对象作为参数传递给处理函数。你根本不需要手动传event——只要写onClick={submit}，点击按钮时React会自动把正确的合成事件传给submit函数，这才是正确的绑定方式。
• 全局event的问题：你代码里的event没有定义，JS会自动去全局作用域找window.event，这个API是旧版浏览器的遗留产物，现在已经被Web标准废弃，所以TypeScript会报错提示你不能使用它。

为什么嵌套函数能正常运行？
比如你写onClick={(e) => submit(e)}，这里传给onClick的是一个箭头函数的引用。点击按钮时，React会调用这个箭头函数，同时把合成事件e传进来，箭头函数再调用submit并把e传递过去，整个流程完全符合React的事件机制，所以不会报错。

正确的写法有两种：

1. 直接传递函数引用（推荐，性能更好）：

<button disabled={isSubmit} onClick={submit}>
  Sign Up
</button>

2. 用箭头函数包裹（需要额外传递自定义参数时使用）：

<button disabled={isSubmit} onClick={(e) => submit(e)}>
  Sign Up
</button>

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