【教訓】buttonタグにはtype属性を必ず書こう

はじめに

buttonタグの書き方や属性の意味を理解しておらず時間溶かした話です。

私みたいにならないでほしいので晒します。

buttonタグのtype属性はデフォルトがsubmit

buttonタグのtype属性はデフォルトがsubmitです。

つまり、type属性を指定しない場合、フォームの送信のためのボタンということになります。

フォームタグの中にあるフォーム送信用のボタンなら問題ないのですが、それ以外のボタンは例外なくtype=”button”とすべきだと思います。

私の身に起きたこと

あれはオリアプ第二弾で、削除機能を付けた時のことです。

わからなすぎて苦痛過ぎたのでどの画面かとかめちゃくちゃ覚えていますw

私は当時、type属性のことはあまり意識せずにコーディングしていました。

意図していた挙動

削除ボタン押す→削除される→レスポンスに応じてトースト表示

実際の挙動

削除ボタン押す→画面がリロードされる(削除は成功している)

ネットワークタブ上は削除リクエストがキャンセルされています・・・困惑

なんでトーストでない？削除出来てるのなんで？なにが起きている？？と全然わからなくて、バックエンドが悪いんかなとかあれこれ試して(AI含めてtype属性には気付かんのなんで？)めちゃくちゃ時間溶かした挙句、これは自己解決できませんでした。

type属性を書いていなかっただけなんですよ～！！！！！

<button onclick={deleteTask}>削除</button>

これを

<button onclick={deleteTask} type="button">削除</button>

こうしたら解決w

挙動の理由

削除ボタンはtype属性を書いていないのでデフォルトのsubmitということになっており、フォームの送信ボタンとして認識されている状況です。

そのため、リロードという意図しない挙動が発生しました。

削除のリクエストは飛んでるのでサーバー側の処理は行われます。

ですが、フロント側はリロードによりリクエストがキャンセルされてしまい、レスポンスを受け取ることはありません・・・

そして削除処理はできるのにトーストが出ることはない・・・ということが起きていました。

type属性をbuttonにしていないが故に全然意図しない挙動になりました。

教訓

buttonタグにはtype属性を指定するべき！！！

私の貴重な時間をめっちゃ溶かして痛みを伴う学びでしたw

必ず挙動がおかしくなるとは限らないと思いますがつけておいて損はないので、予防的に必ず書くと決めました。

忘れることもありますが・・

おわりに

buttonクリック時の処理がおかしいなと思ったらtype属性が適切かまず確認してみてください！！

私みたいになるな！！笑