【React】フォームでsubmitボタンが２つある場合の処理の分け方

はじめに

今まで１つのフォームにsubmitボタンは１つしか表示したこと無かったのですが、２つ表示したい場面があり、処理の分岐に困ったので備忘録として残します。

コード

event.nativeEvent.submitterでクリックしたボタンの要素を取得して、処理を分岐させてます。

import React from 'react';

export const MyForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();

    // クリックしたボタンの要素
    const clickedButton = event.nativeEvent.submitter;

    if (clickedButton.id === 'button1') {
      // ボタン1がクリックされた時の処理
    }

    if (clickedButton.id === 'button2') {
      // ボタン2がクリックされた時の処理
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* フォーム要素 */}
      <button type="submit" id="button1">
        ボタン１
      </button>
      <button type="submit" id="button2">
        ボタン２
      </button>
    </form>
  );
};

まとめ

そもそもsubmitボタンではなく、片方をクリックイベントにすれば良いだけですが、submitterプロパティの存在を初めて知って感動したので記事にしました。

参考記事

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。