为什么form内submit按钮绑定的createGroup函数未触发反而跳转至/?

问题原因 #

这是浏览器原生表单的默认提交行为导致的：

• 你代码里的提交按钮type设置为submit，且外层包裹了<form>标签，点击这类按钮时浏览器会默认触发表单提交动作
• 你的表单没有指定action属性，默认会把表单数据作为查询参数拼接到当前页面URL后提交，就出现了跳转到/?的情况
• 表单默认提交是同步跳转行为，会中断你绑定的异步createGroup函数执行，所以看起来函数没有被触发
• 取消按钮没有该问题，是因为你给它设置的type="cancel"不是HTML标准的按钮type值，浏览器不会将其识别为提交按钮，所以不会触发默认表单提交

解决方法 #

有两种常用方案可选：

方案1：修改提交按钮type

直接把提交按钮的type从submit改成button，和你正常工作的测试按钮保持一致即可，这样点击只会触发你绑定的onClick事件，不会触发默认表单提交：

<button type = "button" className = "bg-green-500 rounded px-12 py-2" onClick = {() => {
    createGroup()
}}>Submit</button>

方案2：给表单绑定onSubmit事件并阻止默认行为

如果需要保留表单的回车提交、原生表单校验等能力，可以给<form>标签绑定onSubmit事件，主动阻止默认提交行为，再调用业务函数：

<form onSubmit={(e) => {
  // 阻止默认表单提交跳转
  e.preventDefault()
  createGroup()
}}>
{/* 其余表单内容不变 */}
<button type = "submit" className = "bg-green-500 rounded px-12 py-2">Submit</button>
</form>

额外建议：取消按钮的type="cancel"是非标准值，建议统一改成type="button"，避免不同浏览器的兼容性问题

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