تعلم بناء النماذج في React - دليل شامل للمبتدئين

📝 بناء النماذج في React: دليل شامل للمبتدئين

مرحباً بك في درس Forms في React! 🎯 في هذا الدرس، سنتعلم كيفية إنشاء النماذج وإدارتها بطريقة احترافية وسهلة. النماذج هي جزء أساسي في أي تطبيق ويب، وتساعدنا في جمع البيانات من المستخدمين.

🎯 ما هي النماذج في React؟

النماذج (Forms) في React تسمح للمستخدمين بإدخال البيانات والتواصل مع التطبيق. سواء كان تسجيل الدخول، أو ملء استبيان، أو إضافة منتج جديد - كل هذه العمليات تعتمد على النماذج.

في React، نتعامل مع النماذج باستخدام مكونات مسيطر عليها (Controlled Components)، حيث تكون قيم الحقول مخزنة في state وتتغير مع كل ضغطة على لوحة المفاتيح.

🔧 إنشاء أول نموذج بسيط

لنبدأ بإنشاء نموذج تسجيل دخول بسيط:

import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('البريد الإلكتروني:', email);
    console.log('كلمة المرور:', password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>البريد الإلكتروني:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      
      <div>
        <label>كلمة المرور:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      
      <button type="submit">تسجيل الدخول</button>
    </form>
  );
}

في هذا المثال، نستخدم useState لتخزين قيم الحقول، وonChange لتحديث state مع كل تغيير.

📋 أنواع حقول الإدخال الشائعة

React يدعم جميع أنواع حقول HTML الأساسية:

function UserForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [gender, setGender] = useState('male');
  const [agree, setAgree] = useState(false);

  return (
    <form>
      {/* حقل نصي */}
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="الاسم الكامل"
      />
      
      {/* حقل رقمي */}
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(e.target.value)}
        placeholder="العمر"
      />
      
      {/* قائمة منسدلة */}
      <select value={gender} onChange={(e) => setGender(e.target.value)}>
        <option value="male">ذكر</option>
        <option value="female">أنثى</option>
      </select>
      
      {/* خانة اختيار */}
      <input
        type="checkbox"
        checked={agree}
        onChange={(e) => setAgree(e.target.checked)}
      />
      <label>أوافق على الشروط</label>
    </form>
  );
}

🎮 معالجة إرسال النموذج

عند إرسال النموذج، نمنع السلوك الافتراضي للصفحة باستخدام event.preventDefault():

const handleSubmit = (event) => {
  event.preventDefault();
  
  // معالجة البيانات هنا
  const formData = {
    email: email,
    password: password
  };
  
  console.log('بيانات النموذج:', formData);
  // يمكنك إرسال البيانات إلى الخادم هنا
};

✅ التحقق من صحة البيانات البسيط

يمكننا إضافة تحقق بسيط للبيانات:

const handleSubmit = (event) => {
  event.preventDefault();
  
  if (!email.includes('@')) {
    alert('يرجى إدخال بريد إلكتروني صحيح');
    return;
  }
  
  if (password.length < 6) {
    alert('كلمة المرور يجب أن تكون 6 أحرف على الأقل');
    return;
  }
  
  // متابعة المعالجة إذا كانت البيانات صحيحة
};

🎨 نصائح لتحسين تجربة المستخدم

1. استخدم required للحقول الإلزامية
2. أضف نصوص مساعدة تحت الحقول
3. استخدم أنواع Input المناسبة (type="email", type="password")
4. أضف رسائل خطأ واضحة

<input
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  required
  placeholder="example@email.com"
/>