تعلم استخدام useState مع النماذج Forms في React خطوة بخطوة

🚀 احتراف التعامل مع النماذج (Forms) باستخدام useState في React

بعد أن تعلمت كيف تستخدم useState لتغيير قيم بسيطة، حان الوقت لنطبق ذلك على شيء نراه في كل موقع إلكتروني تقريباً: النماذج (Forms).

سواء كانت صفحة تسجيل دخول، أو نموذج اتصال، أو حتى حقل بحث، فإن الأساس واحد وهو: كيف نأخذ ما يكتبه المستخدم ونخزنه في "حالة" (State) داخل React؟

📝 ما هي المكونات المدارة (Controlled Components)؟

في HTML العادي، يقوم المتصفح بإدارة قيمة حقل الإدخال (input) بنفسه. لكن في React، نحن نريد أن يكون "التحكم" كاملاً في يدنا.

المكون المدار (Controlled Component) هو ببساطة حقل إدخال يتم التحكم في قيمته وعملية تحديثه من خلال useState.

بمعنى آخر:

1. القيمة المعروضة في الحقل تأتي من الـ State.
2. عندما يكتب المستخدم حرفاً، نقوم بتحديث الـ State فوراً.

🛠️ الخطوات العملية لربط Input بـ useState

لتحويل أي حقل إدخال إلى مكون مدار، نحتاج إلى شيئين أساسيين:

1. Value: نربط خاصية value في الـ input بمتغير الحالة.
2. onChange: نستخدم هذه الدالة لمراقبة أي تغيير يحدث في الحقل وتحديث الحالة.

لنطبق ذلك بمثال بسيط جداً 👇

تخيل أننا نريد إنشاء حقل يطلب من المستخدم كتابة اسمه:

import React, { useState } from 'react';

function NameForm() {
  // 1. تعريف الحالة لتخزين الاسم، القيمة الابتدائية نص فارغ
  const [name, setName] = useState("");

  // 2. دالة للتعامل مع التغيير في الإدخال
  const handleNameChange = (event) => {
    setName(event.target.value); // تحديث الحالة بالقيمة المكتوبة حالياً
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>Enter your name:</h3>
      
      {/* ربط القيمة بالـ state والدالة بـ onChange */}
      <input 
        type="text" 
        value={name} 
        onChange={handleNameChange} 
        placeholder="Write your name here..."
      />
      
      <p>Hello, {name}! 👋</p> 
    </div>
  );
}

export default NameForm;

شرح الكود خطوة بخطوة:

• const [name, setName] = useState(""): أنشأنا حالة اسمها name لتبدأ فارغة.
• event.target.value: هذا هو السر! الـ event يحتوي على معلومات عن الحدث، و target هو حقل الإدخال نفسه، و value هي القيمة التي كتبها المستخدم.
• value={name}: أخبرنا React أن قيمة هذا الحقل يجب أن تكون دائماً هي القيمة الموجودة في name.

📝 التعامل مع نماذج تحتوي على أكثر من حقل

ماذا لو كان لدينا نموذج تسجيل يحتوي على "الاسم" و "البريد الإلكتروني"؟ هل نحتاج لعمل useState لكل حقل؟

نعم، في هذه المرحلة المبتدئة، الأسهل والأوضح هو إنشاء حالة منفصلة لكل مدخل لضمان عدم التداخل وفهم العملية بشكل صحيح.

مثال: نموذج تسجيل بسيط (Sign Up Form) 👇

import React, { useState } from 'react';

function SignUpForm() {
  // تعريف حالات منفصلة لكل حقل
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");

  // دالة للتعامل مع إرسال النموذج
  const handleSubmit = (event) => {
    event.preventDefault(); // منع الصفحة من إعادة التحميل (Refresh)
    alert(`User: ${username}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', width: '300px', gap: '10px' }}>
      
      <div>
        <label>Username: </label>
        <input 
          type="text" 
          value={username} 
          onChange={(e) => setUsername(e.target.value)} 
        />
      </div>

      <div>
        <label>Email: </label>
        <input 
          type="email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
        />
      </div>

      <button type="submit">Submit Data</button>
    </form>
  );
}

export default SignUpForm;

ملاحظات هامة على المثال:

• استخدمنا (e) => setUsername(e.target.value) وهي طريقة مختصرة لكتابة الدالة مباشرة داخل الـ onChange بدلاً من تعريف دالة خارجية.
• استخدمنا event.preventDefault() في دالة handleSubmit لأن النماذج في HTML تقوم بإعادة تحميل الصفحة عند الضغط على Submit، ونحن في React نريد منع ذلك لتبقى التجربة سريعة وسلسة (Single Page Application).

⚠️ ملخص سريع للنقاط الأساسية:

• ✅ useState هي المحرك الذي يحفظ بيانات المدخلات.
• ✅ value تجعل الـ Input يقرأ من الـ State.
• ✅ onChange تجعل الـ State تُحدّث عند الكتابة.
• ✅ preventDefault() ضرورية جداً عند التعامل مع onSubmit لمنع تحديث الصفحة.