フォームは、ユーザーとしても開発者側としても、すべての開発者が遭遇するものです。これらはほとんどの Web サイトに不可欠ですが、その複雑さは、単純な 3 フィールドの問い合わせフォームから、ギガモンスター ティ レックス、150 フィールドを含む複数ページのフォーム、動的検証、非同期チェックまで、大きく異なります。
この投稿では、React Hook Form、Zod、Shadcn を使用して、幅広いフォーム要件を簡単に処理できる、適応性があり開発者に優しいソリューションを作成する方法を検討します。
この投稿で開発するフォームは次のとおりです。フォローアップとして、さらに複雑になるフォームの高度な使用法について別の投稿を書く予定ですので、お楽しみに?
フォームの構築と管理に使用するスタックを見てみましょう。
これは、Shadcn ライブラリのフォーム フィールドを示すスニペットの例です:
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
スタックの別のフレーバーを使用することを好む場合でも、React と RHF に固執する限り、これは依然として有効な例であり、作業を進めることができます。
基本的なフォームのデモに使用するアプリケーションは、重要な CRUD 操作を備えた管理パネルです。これには電子メールとパスワードの認証が含まれており、すべてのユーザーの表を表示するメイン画面と、この記事の主役となるユーザー作成ページの 2 つのページで構成されます。
私たちのフォームには、指定された要件を満たさずにユーザーがフォームを送信 (つまり、新しいユーザーの作成) できないことを保証するための検証が含まれます。 User オブジェクトには、文字列、日付 (生年月日など)、電子メール文字列、ブール値 (プレミアム ユーザー ステータスなど) など、さまざまな検証に適したさまざまなデータ型が含まれているため、検証例の優れた候補です。完全な Prisma スキーマ ファイルを以下に示します。
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
プロジェクトを開始するには、todo-ts という TypeScript で事前定義された Wasp テンプレートを使用します。このテンプレートには、ログイン画面やサインアップ画面を含む、既製のコンポーネントと認証用のルーティングが付属しています。また、Wasp で CRUD 操作がどのように機能するかを示す確かな例も提供されており、フレームワークを初めて使用する場合に最適です。さらに、カスタマイズの柔軟性が向上するため、新しい Wasp TypeScript SDK を利用して構成を管理します。
Wasp チームは、最新のオープンソース React/NodeJS フレームワークの構築はもちろんのこと、このようなコンテンツの作成にも熱心に取り組んでいます。
あなたのサポートを示す最も簡単な方法は、Wasp リポジトリにスターを付けることです。 ?ただし、(貢献のため、または単に製品をテストするために) リポジトリをご覧いただければ幸いです。下のボタンをクリックして、Wasp に星を付けてサポートを示してください!
⭐️ご支援ありがとうございます?
フォームを操作するには、まず Zod 検証スキーマを定義します。このフォームには、文字列、日付、ブール値の 3 つのデータ型があります。ほとんどのフィールドに検証を適用します。名前と姓は必須ですが、電子メールは組み込みの電子メール検証を利用します。 Zod は、電子メール、URL、UUID などのさまざまなタイプの組み込み検証を使用して、一般的な文字列タイプの検証を簡素化します。これは、電子メール フィールドに役立ちます。
追加の検証の場合、日付を将来の日付に設定することはできず、premiumUser フィールドは単にブール値である必要があります。 Zod はデフォルトの検証エラー メッセージも提供しますが、これらはカスタマイズできます。たとえば、名前: z.string().min(1) の代わりに、名前: z.string().min(1, '名前は必須です') を指定できます。
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
私たちのフォームは React Hook Form の useForm フックによって管理されており、フォーム値の処理と検証、エラーのチェック、フォームの状態の管理のための広範なオプションが提供されています。 Zod 検証スキーマを統合するには、Zod リゾルバーを使用して、React Hook Form が以前に定義した検証を適用できるようにします。
フォームのdefaultValuesは顧客オブジェクトから派生します。このコンポーネントは新規顧客の追加と既存顧客の編集の両方に使用されるため、必要なデータを入力として渡します。新規顧客の場合は、いくつかの適切なデフォルト値が使用されます。既存の顧客の場合、データはデータベースから取得されます。デフォルト値の設定と、createCustomer または updateCustomer のどちらを呼び出すか決定することを除けば、フォーム処理の他のすべての側面は同じままです。
model Customer {
id Int @id @default(autoincrement())
name String
surname String
email String
dateOfBirth DateTime
premiumUser Boolean
}
最後のステップは、フォーム自体を作成し、それを TSX ファイルにアセンブルすることです。前に示したように、このプロセスは簡単です。テキスト入力、日付ピッカー、または Shadcn コントロールのチェックボックスを使用する場合でも、同様の構造に従います。
const formSchema = z.object({
name: z.string().min(1, { message: 'Name is required' }),
surname: z.string().min(1, { message: 'Surname is required' }),
email: z.string().email({ message: 'Invalid email address' }),
dateOfBirth: z
.date()
.max(new Date(), { message: 'Date cannot be in the future' }),
premiumUser: z.boolean(),
});
完成したアプリケーションを確認したい場合は、GitHub リポジトリ (GitHub Repo) をチェックしてください。この記事でフォームの操作が簡単になったことを願っています。さらにフォーム関連のコンテンツに興味がある場合は、パート 2 をお楽しみに!次のパートでは、アプリケーションを強化するための高度なパターンと検証テクニックについて詳しく説明します。
この投稿が気に入ったら、GitHub で Wasp をスターにすることを検討してください。皆様のご支援により、Web 開発が誰にとってもより簡単かつスムーズに行えるようになります。 ?
以上がReact Hook Form、Zod、Shadcn を使用して React フォームを簡単に構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
