Reactのフォームで二重クリックを防止する方法

Reactのフォームで二重クリックを防止する方法

Reactでフォームの二重クリックを防止するには、いくつかの方法があります。
以下に一般的な方法を紹介します。

1. ボタンを無効化する

フォーム送信ボタンを一度クリックされた後に無効化する方法です。

import React, { useState } from 'react';

function MyForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    setIsSubmitting(true);

    // フォーム送信処理を行う
    // 今回は例としてsetTimeoutを使用しているが、実際はAPI処理実行後などに有効化する
    setTimeout(() => {
      setIsSubmitting(false); // 送信処理が完了したらボタンを再度有効化
    }, 2000);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '送信中...' : '送信'}
      </button>
    </form>
  );
}

export default MyForm;

2. 状態管理でボタンを無効化する

状態管理ライブラリ（例: Redux）を使用してフォームの送信状態を管理し、ボタンを無効化する方法です。
1とほとんど一緒ですが、送信状態の管理が必要な要素がボタン以外にもある場合には、状態管理ライブラリを使用する場合が便利でしょう。

3. カスタムフックを使用する

複数のフォームで使い回せるように、カスタムフックを作成して二重クリックを防止することもできます。

import React, { useState } from 'react';

function usePreventDoubleClick() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = (callback) => (event) => {
    event.preventDefault();
    if (!isSubmitting) {
      setIsSubmitting(true);
      callback(event);
      setTimeout(() => {
        setIsSubmitting(false);
      }, 2000);
    }
  };

  return { isSubmitting, handleSubmit };
}

function MyForm() {
  const { isSubmitting, handleSubmit } = usePreventDoubleClick();

  const onSubmit = (event) => {
    // フォーム送信処理
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" name="name" required />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '送信中...' : '送信'}
      </button>
    </form>
  );
}

export default MyForm;

これらの方法を使用することで、Reactのフォームで二重クリックを防止することができます。
具体的な要件やアプリケーションの構造に応じて、適切な方法を選択してください。