検索ボックスに詳細検索用のボタンを付けて詳細を押すと詳細検索モーダルを表示するようにしていたんですけど、

inputの自動補完をOFFにしたいなと思い下記のように変えたら

<form autoComplete=’off’>　//←追加
<input type=’text’>
<button onClick={……}>詳細</button>
<button onClick={……}>検索</button>
</form>

詳細ボタンをクリックするとページがリローディングされるバグが発生するようになりました。

どうやら<form>の中の<button>はtype=’button’などtypeを明確にしていない場合、全てsubmit扱いになってしまうようでした。そのため詳細ボタンを押すとsubmitのデフォルト動作としてページをリロードしてしまっていました。

これはevent.preventDefault()でも解消できるっぽいですね。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

内田 美樹

システムエンジニアをしています。 フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。

最新記事 by 内田 美樹 (全て見る)

• 【ふるさと納税】買ってよかった返礼品② - 2024年10月31日
• 【CSS】印刷時に背景色がつかない時の対処法 - 2024年9月30日
• 【雑談】夏風邪になりました、、 - 2024年8月30日