React TypeScript 表单onSubmit绑定事件时提示submit事件类型无法赋值

报错原因 #

你混淆了事件对象类型和事件处理函数的类型：React.FormEventHandler<HTMLFormElement>是整个提交处理函数的类型定义，不是函数接收的事件对象的类型。你把函数类型当成了参数e的类型，所以触发了类型不匹配报错。

修复方案 #

方案1：给事件参数指定正确的事件对象类型 #

事件对象的正确类型是React.FormEvent<HTMLFormElement>，直接修改参数类型即可：

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault()
}

<form onSubmit={handleSubmit}></form>

方案2：直接给整个处理函数标注类型 #

也可以把类型标注写在函数变量上，TS会自动推导出参数e的类型，不用单独给参数加类型：

const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
  e.preventDefault()
}

<form onSubmit={handleSubmit}></form>

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