Zenn
🖥

React – formで送信するとページ遷移が起こるのを防ぐ

2023/09/01に公開
tech

コード例

submitのイベントで Default挙動を無効化する


const FormSubmit = () => {

  const handleOnsubmit = (e: any) => {
    e.preventDefault();
    console.log(e.target.textContent)
  }

  return (
    <>
      <div>
        <form onSubmit={handleOnsubmit}>
          <button >Click me</button>
        </form>
      </div>
    </>
  );
}
export default FormSubmit;

参考

単純に HTML的な form を書くのはReact流ではなさそうだ

ユーザがフォームを送信した際に新しいページに移動する、という、HTML フォームとしてのデフォルトの動作をします。React でこの振る舞いが必要なら、そのまま動きます。しかし大抵のケースでは、フォームの送信に応答してユーザがフォームに入力したデータにアクセスするような JavaScript 関数があった方が便利です。

https://ja.reactjs.org/docs/forms.html

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-12

Discussion