𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗕𝘂𝗶𝗹𝗱 𝗚𝘂𝗶𝗱𝗲

Reactフォームコンポーネント構築ガイド

Reactでフォームを構築するには、慎重な状態管理が必要です。このガイドでは、登録フォームをゼロから構築する方法を説明します。

次の4つの主要な概念を学びます：

• 状態管理 (State Management) すべてのフォームフィールドを1つのstateオブジェクトに保存します。useStateフックを使用して、名前、年齢、メールアドレス、パスワードを管理します。

• 入力の処理 (Handling Inputs) 1つの関数ですべての入力変更を管理します。既存のデータをスプレッド演算子で展開し、入力名に基づいて新しい値を追加することで、stateを更新します。

• フォームのバリデーション (Form Validation) 送信前にすべてのフィールドにデータが含まれているかを確認します。フィールドが空の場合はアラートを表示します。

• キーボードサポート (Keyboard Support) Enterキーのリスナーを追加します。これにより、ユーザーはボタンをクリックせずにフォームを送信できます。

コード例：

import { useState } from "react";

function FormValidation() { const [userdata, setUserdata] = useState({ name: "", age: "", mobile: "", email: "", dob: "", password: "" });

function getdata(e) { const { name, value } = e.target; setUserdata({ ...userdata, [name]: value }); }

function validate() { const { name, age, mobile, email, dob, password } = userdata; if (name && age && mobile && email && dob && password) { alert("Submitted successfully"); } else { alert("Please fill all fields"); } }

function handlekey(e) { if (e.key === "Enter") { validate(); } }

return (

Submit

); }

出典: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh