form组件onSubmit与onClick：非DOM场景下的行为差异问询

先看你提到的原始代码示例：

<form> 
  <input /> 
  <button onClick={e => { e.preventDefault(); alert("clicked"); }} > click </button> 
</form>

正如你观察到的，把按钮的onClick逻辑移到表单的onSubmit后，在常规的点击按钮、回车提交场景下，二者表现完全一致——之前很多说法称onClick不响应回车提交其实不准确，因为当按钮是表单内默认的submit类型时，回车提交会自动触发该按钮的onClick事件。

不过除了DOM操作/事件模拟场景外，这两种写法在以下场景会表现出明显差异：

• 按钮类型设为button而非默认submit时：如果给按钮加上type="button"，此时回车提交表单只会触发表单的onSubmit，但不会触发按钮的onClick。因为这种按钮不再是表单的提交触发器，回车提交的逻辑直接由表单处理，和按钮无关。

• 表单存在多个提交按钮时：如果表单里有多个<button type="submit">按钮，点击不同按钮会触发各自的onClick，但都会触发表单的onSubmit。这时onSubmit可以作为统一的提交逻辑入口，而onClick可以用来区分提交类型（比如“保存草稿”和“提交审核”按钮，各自的onClick标记不同的提交意图，再在onSubmit里统一处理）。

• 浏览器自动填充后的自动提交：部分浏览器在自动完成表单填充后，会自动触发表单提交，这种情况下不会触发按钮的onClick，但会正常触发表单的onSubmit。

• 事件执行顺序不同：按钮的onClick会先于表单的onSubmit执行。如果在onClick中调用e.preventDefault()，会直接阻断表单提交流程；而如果在onSubmit中调用，则是在提交流程触发后再阻止。

• 按钮被禁用时：当按钮设置了disabled属性，点击按钮既不会触发onClick，也不会触发表单提交；但如果通过其他方式（比如页面其他按钮、JS逻辑）提交表单，onSubmit依然会正常触发，而被禁用按钮的onClick永远不会执行。

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