📊 State و Events

📖 سلسلة تعلم React و Next.js | المقال 5

🔄 State & Events في React

State = الذاكرة. Events = التفاعل. تعلمهما وستبني تطبيقات تفاعلية!

📦 ما هو State؟

State = بيانات يتذكرها المكون ويمكن تغييرها
عندما يتغير State ← يعاد رسم المكون (re-render)

⚡ useState Hook

import { useState } from 'react';

export default function Counter() {
  //        ↓ القيمة    ↓ دالة التحديث     ↓ القيمة الابتدائية
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        زيادة
      </button>
    </div>
  );
}

شرح:

الجزء	الشرح
count	القيمة الحالية
setCount	دالة لتحديث القيمة
useState(0)	القيمة الابتدائية = 0

🖱️ Events - الأحداث

أهم Events:

Event	الاستخدام	مثال
onClick	عند الضغط	زر
onChange	عند التغيير	input
onSubmit	عند الإرسال	form
onFocus	عند التركيز	input
onBlur	عند الخروج	input

📝 مثال عملي: نموذج تسجيل

import { useState } from 'react';

export default function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault(); // منع إعادة تحميل الصفحة
    
    console.log({ name, email, age });
    alert(`مرحباً ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit} className="p-8 space-y-4">
      
      {/* حقل الاسم */}
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="الاسم"
        className="w-full p-3 border rounded"
      />
      
      {/* حقل البريد */}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="البريد الإلكتروني"
        className="w-full p-3 border rounded"
      />
      
      {/* حقل العمر */}
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(parseInt(e.target.value))}
        placeholder="العمر"
        className="w-full p-3 border rounded"
      />
      
      {/* زر الإرسال */}
      <button 
        type="submit"
        className="bg-blue-500 text-white px-6 py-2 rounded"
      >
        إرسال
      </button>
      
    </form>
  );
}

⚠️ قواعد مهمة

❌ لا تفعل:

// تغيير State مباشرة
count = count + 1;  // ❌ خطأ!

✅ الصحيح:

// استخدام setFunction
setCount(count + 1);  // ✅ صحيح

🔄 تحديث State بناءً على القيمة السابقة

// ❌ قد يسبب مشاكل
setCount(count + 1);

// ✅ الأفضل - يستخدم القيمة السابقة مباشرة
setCount(prev => prev + 1);

📊 ملخص

المفهوم	الشرح
useState	إنشاء State
setFunction	تحديث State
onChange	متابعة تغييرات input
onSubmit	إرسال نموذج

📌 تسميات: React State Events

✨ ← المقال السابق | المقال التالي: Forms & Validation → ✨

سلسلة تعلم React و Next.js مع Ahmed Issa