React Hook Form点击取消按钮自动提交的原因及阻止方法

该现象是HTML表单原生默认行为导致，并非React Hook Form的逻辑bug：

• 所有位于<form>标签内部的<button>元素，若未显式声明type属性，浏览器会默认将其判定为type="submit"的提交按钮，点击时会自动触发表单的原生submit事件。
• React Hook Form的校验、提交逻辑本身就是基于表单原生submit事件实现的，因此点击未指定type的取消按钮时，除了执行绑定的onCancel逻辑，还会同步触发React Hook Form的提交流程。

优先选择第一种方案，符合HTML语义规范，是业界通用的最佳实践：

• 方案1：给取消按钮显式设置type="button"，明确标识该按钮为普通功能按钮，不关联表单提交行为
  修改后代码如下：

const onCancel = () => {
    history.goBack();
};

<StyledButton type="button" onClick={onCancel}>
    {Translate('cancel')}
</StyledButton>

• 方案2：若使用的StyledButton组件做了封装未透传type属性，无法直接设置按钮type，可以在点击回调中阻止默认事件，拦截表单提交触发
  修改后代码如下：

const onCancel = (e) => {
    e.preventDefault();
    history.goBack();
};

<StyledButton onClick={onCancel}>
    {Translate('cancel')}
</StyledButton>

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