التعامل مع الأحداث في React

الدرس السابع: التعامل مع الأحداث في React

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

1. التعامل مع الأحداث مثل onClick, onChange, onSubmit

في React، يمكن التعامل مع الأحداث (مثل النقر على الأزرار، التغيير في الحقول النصية، إرسال النماذج) باستخدام المعالجات (event handlers) المربوطة بالـ props.

مثال على استخدام onClick:

import React, { useState } from 'react';

function ButtonClick() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // تحديث الـ state
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default ButtonClick;

في هذا المثال:

• يتم التعامل مع الحدث onClick عند النقر على الزر.
• عندما يتم النقر، يتم تنفيذ handleClick التي تقوم بتحديث state باستخدام setCount.

مثال على استخدام onChange:

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value); // تحديث الـ state بالمدخل الجديد
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>Typed text: {text}</p>
    </div>
  );
}

export default TextInput;

في هذا المثال:

• يتم استخدام onChange لالتقاط التغييرات التي تطرأ على الحقل النصي.
• عند كل تغيير في النص، يتم استدعاء handleChange لتحديث state بالقيمة الجديدة.

مثال على استخدام onSubmit:

import React, { useState } from 'react';

function FormSubmit() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // منع الحدث الافتراضي (إرسال النموذج)
    alert('Form submitted with name: ' + name);
  };

  const handleChange = (event) => {
    setName(event.target.value); // تحديث الـ state
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormSubmit;

في هذا المثال:

• عند تقديم النموذج باستخدام onSubmit, يتم استدعاء handleSubmit.
• داخل handleSubmit, يتم استخدام event.preventDefault() لمنع إرسال النموذج الافتراضي، وبدلاً من ذلك يتم عرض رسالة تحتوي على النص المدخل.

2. التعامل مع البيانات المدخلة من قبل المستخدم

في React، عادةً ما يتم التعامل مع البيانات المدخلة من قبل المستخدم عبر form controls (مثل الحقول النصية، الأزرار، الخ). نستخدم state لتخزين هذه المدخلات.

مثال على التعامل مع المدخلات في React:

import React, { useState } from 'react';

function UserInput() {
  const [input, setInput] = useState('');

  const handleChange = (event) => {
    setInput(event.target.value); // تحديث الـ state بالمدخل الجديد
  };

  const handleSubmit = (event) => {
    event.preventDefault(); // منع إرسال النموذج
    alert('User input: ' + input);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={input} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UserInput;

في هذا المثال:

• يتم تخزين المدخلات في state باستخدام setInput.
• عندما يقوم المستخدم بإدخال قيمة في الحقل النصي، يتم تحديث state بواسطة handleChange.
• عند إرسال النموذج باستخدام الزر، نعرض المدخل في نافذة منبثقة.

3. منع الأحداث الافتراضية باستخدام event.preventDefault()

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

مثال على منع الحدث الافتراضي في نموذج:

import React, { useState } from 'react';

function PreventDefaultExample() {
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // منع إرسال النموذج
    alert('Email submitted: ' + email);
  };

  const handleChange = (event) => {
    setEmail(event.target.value); // تحديث الـ state
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={handleChange}
        placeholder="Enter your email"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default PreventDefaultExample;

في هذا المثال:

• عند تقديم النموذج، يتم منع السلوك الافتراضي باستخدام event.preventDefault()، وهذا يعني أن النموذج لن يتم إرساله إلى الخادم.
• بعد ذلك، نقوم بعرض المدخلات في نافذة منبثقة.

4. التعامل مع الأحداث في React: ملخص

• onClick: يتم استخدامه للتعامل مع نقرات الأزرار.
• onChange: يُستخدم لمراقبة التغييرات في الحقول النصية أو أي عناصر تفاعلية.
• onSubmit: يُستخدم لمعالجة إرسال النماذج ومنع إرسال النموذج الافتراضي باستخدام event.preventDefault() إذا كنت بحاجة إلى معالجة البيانات يدويًا.
• event.preventDefault(): يمنع السلوك الافتراضي للحدث، مثل إرسال النموذج أو إعادة تحميل الصفحة.

React يجعل من السهل التعامل مع الأحداث والتفاعل مع بيانات المستخدم بفضل الطريقة التي تدير بها state.