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

コード例

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 関数があった方が便利です。

チャットメンバー募集

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

Twitter