React表单onsubmit事件处理函数应使用什么类型？

在TypeScript的React项目里，表单提交事件的参数类型直接用React.FormEvent<HTMLFormElement>就对了，这个类型是React官方定义的，包含了preventDefault()这类常用方法的类型支持。

给你改好的代码示例：

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  // 这里可以加表单处理逻辑，比如收集输入值
}

return (
   <form 
      onSubmit={handleSubmit}
   >
      <input
         type='text'
         name='name'
      />
      <button type="submit">提交</button>
   </form>
)

要是你用的是纯JavaScript项目，其实不用显式写类型，但TypeScript里用这个类型能拿到完整的代码提示和类型校验，避免出错。

另外提一句：如果需要操作表单本身，比如获取里面的输入控件，可以用e.currentTarget，它的类型就是HTMLFormElement，比如e.currentTarget.elements就能拿到表单里所有的表单元素。

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