دليل بناء مكونات النماذج في React

دليل بناء مكون نموذج React

يتطلب بناء النماذج في React إدارة دقيقة للحالة (state management). يوضح لك هذا الدليل كيفية بناء نموذج تسجيل من الصفر.

ستتعلم أربعة مفاهيم أساسية:

• إدارة الحالة (State Management) قم بتخزين جميع حقول النموذج في كائن حالة (state object) واحد. استخدم hook useState لتتبع الاسم، والعمر، والبريد الإلكتروني، وكلمة المرور.

• التعامل مع المدخلات (Handling Inputs) استخدم دالة واحدة لإدارة جميع تغييرات المدخلات. يمكنك تحديث الحالة عن طريق نشر (spreading) البيانات القديمة وإضافة القيمة الجديدة بناءً على اسم المدخل.

• التحقق من صحة النموذج (Form Validation) تحقق مما إذا كانت جميع الحقول تحتوي على بيانات قبل الإرسال. أظهر تنبيهاً إذا كان أي حقل فارغاً.

• دعم لوحة المفاتيح (Keyboard Support) أضف مستمعاً (listener) لمفتاح 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 (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

المصدر: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh