iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
Modern Web

ReactJS 疑難排解系列 第 3

ReactJS 疑難排解:為什麼按下取消,form 卻 submit 了

先來看一段簡單的 code

<form onSubmit={handleSubmit}>
  ...
  <button onClick={handleCancel}>取消</button>
  <button type="submit">送出</button>
</form>

執行看看,你會發現明明按了「取消」,form 還是 submit 了
你發現問題在哪了嗎?


button type

其實 type="submit" 在上面的情形中是不需要的,因為預設在 form 下面的 button type 就會是 submit
而且這不是 ReactJS 所導致的行為,而是 HTML 中 button 的預設行為

所以把

<button onClick={handleCancel}>取消</button>

改成

<button type="button" onClick={handleCancel}>取消</button>

就不會發生按了「取消」卻觸發 submit 的情形了

後記

這篇好像不算 ReactJS 的疑難排解,但卻是我時常忘記的一點,再加上以前一直以為這是 ReactJS 的雷,剛剛一查才發現是 button 的預設行為。

另外,我想時常會下意識的寫出 type="submit" 應該是因為大多數的 UI Library 怕大家也會踩到這個雷,所以都把 Button Component 的 default type prop 強制寫為 button 了,至於好還是不好就見仁見智了。

才寫到第三篇就快沒想法了, 希望可以撐完 30 天 (´・ω・`)


上一篇
ReactJS 疑難排解:寫出一個好的 Render Counter
下一篇
ReactJS 疑難排解:會報錯的 console.log(event)
系列文
ReactJS 疑難排解8

1 則留言

0

加...加油...

maxam iT邦新手 5 級 ‧ 2020-09-19 00:19:02 檢舉

我要留言

立即登入留言