在 React + Typescript 中处理表单提交的最佳实践

Question

我正在将我的很多代码重构为 TypeScript，刚刚真正开始掌握 TS。当 TS 在 React 事件上强制 HTML 元素类型时，它已经考虑到我如何创建我的表单及其提交事件处理。

我一直使用带有onClick={this.handleSubmission} 事件处理程序的<button /> 元素。现在，在 React 事件上指定的 HTML 元素类型让我认为似乎有两种主要的方式来处理表单提交 - 通过捕获提交按钮上的点击事件（如上）或通过捕获 onSubmit 事件表单本身。这些似乎在 TypeScript 中键入以下内容：-

(e: React.MouseEvent<HTMLButtonElement>)
(e: React.FormEvent<HTMLFormElement>)

就最佳实践而言，两者之间真的有区别吗？我假设提交按钮单击（假设它是一个真正的 HTML 按钮元素）将始终由 (e: React.MouseEvent<HTMLButtonElement>) 处理。但是，<input type="submit" value="Submit" /> 似乎（在 TS 术语中）是 HTMLFormElement 上的真正 FormEvent，因为它不能是按钮事件。

是否有最佳实践或技术要求，还是仅取决于个人喜好？谢谢。

Answer 1

不使用FormEvent 会增加担忧，因此捕获 FormEvent 可以节省您的时间。如果我们决定使用MouseEvent 而不是FormEvent，我们应该关心默认值，添加e.preventDefault()。

并且使用<button /> 的type 属性将使标记更具声明性。