LoginSignup
1
0

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

Posted at

はじめに

前回は、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>
  );
}

image.png

image.png

image.png

まとめ

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0