[React] カスタムダイアログの実装！(使用例)

はじめに

前回は、Reactでカスタムダイアログを実装する方法を紹介しました！
今回は、前回のコードを改造し、簡単な使用例を追加してみたいと思います！

具体的には、確認ダイアログを搭載した、シンプルな名前登録アプリを作成してみます。
今回の実装ではCustomDialog.jsxが必要となる為、前回の記事を参考に追加してから実施してみてください！

1. 登録確認ダイアログの作成

まず、登録確認ダイアログを作成します！
前回記事のTestDialog.jsxのcontentの中身とボタンのラベルをカスタムすることで作成できます！

// components/UserRegistrationDialog.jsx
import React from "react";
import CustomDialog from "./CustomDialog";

export default function UserRegistrationDialog({
  isOpen,
  userName,
  onConfirm,
  onCancel,
}) {
  return (
    <CustomDialog
      isOpen={isOpen}
      content={`以下の内容で登録しますか？\n\n名前: ${userName}`}
      confirmButtonLabel="登録"
      cancelButtonLabel="キャンセル"
      onConfirm={onConfirm}
      onCancel={onCancel}
    />
  );
}

2. 名前入力と登録ボタンの作成

名前入力欄と登録ボタンを作成します！
入力された名前はReactのステートで管理します。

コンソールログに表示する処理をDBへ接続するAPIを呼び出すように改造すれば、名前登録アプリケーションの完成です！

// pages/index.jsx
import { useState } from "react";
import UserRegistrationDialog from "../components/UserRegistrationDialog";

export default function HomePage() {
  const [userName, setUserName] = useState("");
  const [isConfirmationDialogOpen, setConfirmationDialogOpen] = useState(false);

  const handleNameChange = (event) => {
    setUserName(event.target.value);
  };

  const handleRegistration = () => {
    setConfirmationDialogOpen(true);
  };

  // 登録が押された時の処理
  const handleConfirmRegistration = () => {
    console.log(`${userName}さんが登録されました！`); // ここをDBへ登録する処理に変更
    setConfirmationDialogOpen(false);
    setUserName(""); // 入力欄の初期化
  };
  // キャンセルが押された時の処理
  const handleCancelRegistration = () => {
    setConfirmationDialogOpen(false);
  };

  return (
    <div>
      <label htmlFor="userName">名前：</label>
      <input
        type="text"
        id="userName"
        value={userName}
        onChange={handleNameChange}
      />
      <button onClick={handleRegistration}>登録</button>

      <UserRegistrationDialog
        isOpen={isConfirmationDialogOpen}
        userName={userName}
        onConfirm={handleConfirmRegistration}
        onCancel={handleCancelRegistration}
      />
    </div>
  );
}

まとめ

今回は、カスタムダイアログの使用例を紹介してみました！
今回の記事を参考に、各自のプロジェクトに追加してみてください！