dialog部品 + tailwindcss + Zod、React Component作成

概要

前回の、dialog 要素の続編メモになります

• 検証はZod使う例です。

[ 公開: 2024/05/15]

---

書いたコード

• https://github.com/kuc-arc-f/express_31react/tree/main/sample/zod

https://github.com/kuc-arc-f/express_31react/tree/main/sample/zod

---

dialog

• 完了 dialog: components/DialogBox.tsx

https://github.com/kuc-arc-f/express_31react/blob/main/sample/zod/src/components/DialogBox.tsx

---

• ErrorDialogBox.tsx : エラー用dialog

https://github.com/kuc-arc-f/express_31react/blob/main/sample/zod/src/components/ErrorDialogBox.tsx

---

• 読見込む画面tsx

• Zod.tsx : 保存時に、zod検証、OK時に完了dialog 表示

https://github.com/kuc-arc-f/express_31react/blob/main/sample/zod/src/client/Zod.tsx

---

---

確認ダイアログ

• OK 押すと、次の関数実行
• cancel : dialog close
• components/ConfirmDialog.tsx

https://github.com/kuc-arc-f/express_31react/blob/main/sample/zod/src/components/ConfirmDialog.tsx

---

確認ダイアログ、呼び出し

• client/Confirm.tsx

https://github.com/kuc-arc-f/express_31react/blob/main/sample/zod/src/client/Confirm.tsx

---