إضافة التفاعلية باستخدام الحالة (State)

دعونا نستكشف كيف تساعدنا React في إضافة التفاعلية باستخدام الحالة (State) و معالجات الأحداث (Event Handlers).

كمثال، لننشئ زر "إعجاب" داخل مكون HomePage الخاص بك. أولاً، أضف عنصر زر داخل عبارة return():

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

الاستماع إلى الأحداث

لجعل الزر يقوم بشيء عند النقر عليه، يمكنك استخدام حدث onClick:

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

في React، أسماء الأحداث تكتب بحروف صغيرة وكبيرة (camelCase). حدث onClick هو واحد من العديد من الأحداث التي يمكنك استخدامها للاستجابة لتفاعل المستخدم. على سبيل المثال، يمكنك استخدام onChange لحقول الإدخال أو onSubmit للنماذج.

معالجة الأحداث

يمكنك تعريف دالة لـ"معالجة" الأحداث عندما يتم تشغيلها. أنشئ دالة قبل عبارة return تسمى handleClick():

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

ثم، يمكنك استدعاء دالة handleClick عند تشغيل حدث onClick:

function HomePage() {
  // 	...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

جرب تشغيل هذا في متصفحك. لاحظ في أدوات المطور كيف يزداد ناتج السجل.

الحالة (State) والخطافات (Hooks)

يحتوي React على مجموعة من الدوال تسمى الخطافات (Hooks). تسمح لك الخطافات بإضافة منطق إضافي مثل الحالة (State) إلى مكوناتك. يمكنك التفكير في الحالة على أنها أي معلومات في واجهة المستخدم الخاصة بك تتغير بمرور الوقت، عادةً ما يتم تشغيلها بواسطة تفاعل المستخدم.

يمكنك استخدام الحالة (State) لتخزين وزيادة عدد المرات التي نقر فيها المستخدم على زر "إعجاب". في الواقع، الخطاف المستخدم في React لإدارة الحالة يسمى: useState()

أضف useState() إلى مشروعك. يقوم بإرجاع مصفوفة، ويمكنك الوصول إلى تلك القيم واستخدامها داخل مكونك باستخدام تفكيك المصفوفة (Array Destructuring):

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

العنصر الأول في المصفوفة هو قيمة الحالة (value)، والتي يمكنك تسميتها بأي شيء. يُفضل تسميتها بشيء وصفي:

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

العنصر الثاني في المصفوفة هو دالة لتحديث القيمة. يمكنك تسمية دالة التحديث بأي شيء، ولكن من الشائع أن تبدأ بـ set متبوعًا باسم متغير الحالة الذي تقوم بتحديثه:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

يمكنك أيضًا الاستفادة من هذه الفرصة لإضافة القيمة الأولية لحالة الإعجابات إلى 0:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

ثم، يمكنك التحقق من أن الحالة الأولية تعمل باستخدام متغير الحالة داخل مكونك.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

أخيرًا، يمكنك استدعاء دالة تحديث الحالة الخاصة بك، setLikes في مكون HomePage، دعنا نضيفها داخل دالة handleClick() التي قمت بتعريفها مسبقًا:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

سيؤدي النقر على الزر الآن إلى استدعاء دالة handleClick، والتي تستدعي دالة تحديث الحالة setLikes مع وسيط واحد وهو عدد الإعجابات الحالي + 1.

ملاحظة: على عكس الخصائص (Props) التي يتم تمريرها إلى المكونات كمعامل دالة أول، يتم بدء الحالة وتخزينها داخل المكون. يمكنك تمرير معلومات الحالة إلى المكونات الفرعية كخصائص (Props)، ولكن يجب الاحتفاظ بمنطق تحديث الحالة داخل المكون حيث تم إنشاء الحالة في البداية.

إدارة الحالة

كان هذا مجرد مقدمة عن الحالة، وهناك المزيد لتعلمه حول إدارة الحالة وتدفق البيانات في تطبيقات React الخاصة بك. لمعرفة المزيد، نوصي بمراجعة أقسام إضافة التفاعلية (Adding Interactivity) وإدارة الحالة (Managing State) في وثائق React.

موارد إضافية:

• الحالة: ذاكرة المكون (State: A component's memory)
• تعرف على أول خطاف لك (Meet your first hook)
• الاستجابة للأحداث (Responding to Events)