التعامل مع الأحداث (Events): برمجة أزرار النقر وتتبع إدخال النصوص

ماذا سنتعلم اليوم؟

سنتعمق في فهم كيفية التعامل مع الأحداث (Events) في React.js، وسنقوم ببناء مكون بسيط يتفاعل مع نقرات الأزرار ويتتبع إدخالات النصوص في الوقت الفعلي.

الخطوة 1: إعداد المكون الأساسي والتعامل مع نقرات الأزرار

سنبدأ بإنشاء مكون React بسيط يحتوي على زر. عند النقر على هذا الزر، سنقوم بتحديث حالة (state) داخل المكون لعرض عدد النقرات.

ملاحظة تقنية: في React، يتم تمرير دوال معالجة الأحداث كخاصية (prop) للعنصر، ويتم تسمية هذه الخاصية بـ onEventName (مثل onClick، onChange). يتم تمرير كائن الحدث (event object) تلقائيًا إلى الدالة المعالجة.

import React, { useState } from 'react'; // استيراد React و useState لإدارة الحالة

function EventHandlingComponent() {
  const [clickCount, setClickCount] = useState(0); // تعريف حالة لتتبع عدد النقرات، القيمة الأولية 0

  const handleButtonClick = () => {
    // دالة معالجة حدث النقر على الزر
    setClickCount(prevCount => prevCount + 1); // تحديث الحالة بزيادة عدد النقرات بمقدار 1
    console.log('تم النقر على الزر!'); // طباعة رسالة في الكونسول عند النقر
  };

  return (
    <div>
      <h2>التعامل مع نقرات الأزرار</h2>
      <p>عدد النقرات: {clickCount}</p>
      <button onClick={handleButtonClick}>انقر هنا</button> {/* ربط دالة handleButtonClick بحدث onClick */}
    </div>
  );
}

export default EventHandlingComponent;

في هذا الجزء، استخدمنا useState لإنشاء متغير حالة clickCount ودالة setClickCount لتحديثه. تم ربط دالة handleButtonClick بحدث onClick للزر، والتي تقوم بزيادة clickCount في كل مرة يتم فيها النقر.

الخطوة 2: تتبع إدخال النصوص في الوقت الفعلي

الآن، سنضيف حقل إدخال نصي (input field) وسنتعلم كيفية تتبع قيمته وتحديثها في حالة المكون فور قيام المستخدم بالكتابة.

ملاحظة تقنية: بالنسبة لحقول الإدخال، يتم استخدام حدث onChange. يتيح لنا هذا الحدث الوصول إلى القيمة الحالية لحقل الإدخال من خلال event.target.value.

import React, { useState } from 'react'; // استيراد React و useState

function EventHandlingComponent() {
  const [clickCount, setClickCount] = useState(0);     // حالة لتتبع عدد النقرات
  const [inputText, setInputText] = useState('');      // حالة لتتبع قيمة حقل الإدخال، القيمة الأولية نص فارغ

  const handleButtonClick = () => {
    setClickCount(prevCount => prevCount + 1);
    console.log('تم النقر على الزر!');
  };

  const handleInputChange = (event) => {
    // دالة معالجة حدث تغيير حقل الإدخال
    setInputText(event.target.value); // تحديث حالة inputText بالقيمة الحالية لحقل الإدخال
    console.log('قيمة الإدخال الحالية:', event.target.value); // طباعة القيمة في الكونسول
  };

  return (
    <div>
      <h2>التعامل مع نقرات الأزرار</h2>
      <p>عدد النقرات: {clickCount}</p>
      <button onClick={handleButtonClick}>انقر هنا</button>

      <hr /> {/* خط فاصل للفصل بين الجزأين */}

      <h2>تتبع إدخال النصوص</h2>
      <input
        type="text"
        value={inputText} // ربط قيمة حقل الإدخال بحالة inputText
        onChange={handleInputChange} // ربط دالة handleInputChange بحدث onChange
        placeholder="اكتب شيئًا هنا..."
      />
      <p>النص الذي كتبته: {inputText}</p>
    </div>
  );
}

export default EventHandlingComponent;

في هذه الخطوة، أضفنا حالة جديدة inputText. عند كل تغيير في حقل الإدخال، يتم استدعاء handleInputChange التي تحدث inputText باستخدام event.target.value، مما يجعل حقل الإدخال "متحكمًا به" (controlled component).

الكود النهائي الكامل

إليك الكود الكامل للمكون الذي يجمع بين التعامل مع نقرات الأزرار وتتبع إدخال النصوص:

import React, { useState } from 'react';

function EventHandlingComponent() {
  // 1. تعريف حالات المكون باستخدام useState
  const [clickCount, setClickCount] = useState(0);     // حالة لتتبع عدد نقرات الزر
  const [inputText, setInputText] = useState('');      // حالة لتتبع قيمة حقل إدخال النص

  // 2. تعريف دالة معالجة حدث النقر على الزر
  const handleButtonClick = () => {
    setClickCount(prevCount => prevCount + 1); // تحديث clickCount بزيادة 1
    console.log('تم النقر على الزر!');          // طباعة رسالة في الكونسول
  };

  // 3. تعريف دالة معالجة حدث تغيير حقل الإدخال
  const handleInputChange = (event) => {
    setInputText(event.target.value); // تحديث inputText بالقيمة الحالية لحقل الإدخال
    console.log('قيمة الإدخال الحالية:', event.target.value); // طباعة القيمة في الكونسول
  };

  return (
    <div>
      <h1>درس: التعامل مع الأحداث في React</h1>

      {/* قسم التعامل مع نقرات الأزرار */}
      <h3>التعامل مع نقرات الأزرار</h3>
      <p>عدد النقرات: <strong>{clickCount}</strong></p>
      <button onClick={handleButtonClick}>انقر لزيادة العداد</button> {/* ربط الزر بدالة handleButtonClick */}

      <hr /> {/* خط فاصل */}

      {/* قسم تتبع إدخال النصوص */}
      <h3>تتبع إدخال النصوص</h3>
      <input
        type="text"
        value={inputText}         // ربط قيمة حقل الإدخال بحالة inputText (مكون متحكم به)
        onChange={handleInputChange} // ربط دالة handleInputChange بحدث onChange
        placeholder="ابدأ بالكتابة هنا..."
        style={{ padding: '8px', width: '300px' }} // بعض التنسيقات البسيطة
      />
      <p>النص الذي كتبته: <strong>{inputText}</strong></p>
    </div>
  );
}

export default EventHandlingComponent;

النتيجة المتوقعة

عند تشغيل هذا المكون في تطبيق React الخاص بك:

• سترى عنوانًا رئيسيًا وزرًا مكتوبًا عليه "انقر لزيادة العداد".
• بجانب الزر، سيكون هناك نص يعرض "عدد النقرات: 0". في كل مرة تنقر فيها على الزر، سيزداد هذا العدد على الشاشة، وستظهر رسالة في الكونسول.
• تحت خط فاصل، سترى حقل إدخال نصي.
• بمجرد البدء في الكتابة داخل حقل الإدخال، سيتم عرض النص الذي كتبته أسفل الحقل مباشرة في الوقت الفعلي، وستظهر قيمته في الكونسول مع كل حرف تكتبه.

← السابقالفهرسالتالي →