React中处理表单提交的正确方式是什么？两种写法哪个更优？

优先选择使用<form>标签绑定onSubmit事件的第一种实现方式，合理性远高于第二种按钮绑定onClick的写法，原因如下：

• 支持原生表单默认交互：第一种写法天然支持用户在输入框按下回车键直接触发表单提交，第二种写法如果没有额外绑定键盘事件，回车不会触发提交逻辑，不符合普通用户的操作习惯。
• 无障碍友好：屏幕阅读器等辅助设备可以正确识别<form>标签的语义，自动提示用户这是可提交的表单区域，对残障用户的使用体验更友好，第二种用<div>包裹的写法完全丢失了这部分特性。
• 语义化更清晰：<form>是HTML标准中专门用来承载表单提交逻辑的语义化标签，不管是后续维护代码，还是对接其他工具（比如自动化测试工具识别表单提交节点），辨识度都远高于无意义的<div>容器。
• 可扩展性更强：如果后续需要添加原生表单能力，比如内置校验（给输入框加required/pattern属性）、表单重置功能，直接基于<form>标签的API就能实现，不需要额外手写大量自定义逻辑。

当然如果是非常简单的临时功能、完全不需要上述特性，第二种写法也能正常运行，但从工程规范、用户体验的角度考虑，优先选择第一种写法是更稳妥的方案。

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