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

Question

我正在将我的很多代码重构为 TypeScript，才真正开始掌握 TS。当 TS 在 React 事件上强制使用 HTML 元素类型时，它已经考虑了我如何创建表单及其提交事件处理。
我一直用的<button />带有 onClick={this.handleSubmission} 的元素附加到它的事件处理程序。现在，在 React 事件中指定的 HTML 元素类型让我觉得似乎有两种主要的方式来处理表单提交——通过捕获提交按钮上的点击事件(如上)或通过捕获 onSubmit表单本身的事件。这些似乎在 TypeScript 中键入以下内容:-

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

在最佳实践方面，两者之间真的有什么区别吗？我认为提交按钮点击(如果它是一个真正的 HTML 按钮元素)总是由 (e: React.MouseEvent<HTMLButtonElement>) 处理。 .然而， <input type="submit" value="Submit" />似乎是(用 TS 术语)真正的 FormEvent在 HTMLFormElement因为它不能是按钮事件。
是否有最佳实践或技术要求，还是仅取决于个人喜好？谢谢。

Answer 1

不使用 FormEvent增加了担忧，因此捕获 FormEvent 可以节省您的时间。如果我们决定使用 MouseEvent而不是 FormEvent ，我们应该关心默认值，添加 e.preventDefault() .
并使用 type <button /> 的属性将使标记更具声明性。