📚 بخش ۲۱: مدیریت رویدادها در React (onClick، onChange و …)

۱. مقدمه — چرا باید این مبحث را خوب یاد بگیریم؟

هر رابط کاربری حرفه‌ای بدون تعامل کاربر بی‌معنی است.
وقتی کاربر روی دکمه کلیک می‌کند، متن وارد می‌کند، گزینه‌ای انتخاب می‌کند یا موس را حرکت می‌دهد، ما باید بتوانیم این رویدادها را شنود کنیم و واکنش مناسب نشان دهیم.

در React این کار با استفاده از event handlers انجام می‌شود، یعنی توابعی که به ویژگی‌های JSX مانند onClick، onChange و … وصل می‌کنیم.
اگر این بخش را خوب یاد بگیریم، می‌توانیم:

• فرم‌ها را کنترل کنیم
• دکمه‌ها و لینک‌ها را فعال کنیم
• بازی‌ها و انیمیشن‌ها بسازیم
• اپلیکیشن‌های تعاملی قوی بنویسیم

---

۲. تفاوت مدیریت رویداد در React و HTML

ابتدا باید بدانیم که رویدادها در React کمی متفاوت از HTML ساده هستند:

ویژگی	HTML سنتی	React
نام خاصیت	کوچک (onclick)	camelCase (onClick)
مقدار	رشته جاوااسکریپت یا inline script	تابع جاوااسکریپت
مکانیزم	رویداد طبیعی DOM	Synthetic Event (رویداد مصنوعی)

📌 Synthetic Event: یک سیستم رویداد داخلی React که روی همه مرورگرها کار می‌کند و مشکلات ناسازگاری مرورگرها را برطرف می‌کند.

---

۳. مثال ساده — رویداد onClick در React

function App() {
  const sayHello = () => {
    alert("سلام کاربر عزیز!");
  };

  return (
    <div>
      <button onClick={sayHello}>کلیک کن!</button>
    </div>
  );
}

---

🔍 تحلیل خط به خط:

1. تابع sayHello را تعریف کردیم که پیام هشدار (alert) نشان دهد.
2. روی دکمه از ویژگی onClick={sayHello} استفاده کردیم.
3. مقدار onClick یک تابع است (نه رشته یا کد مستقیم).
4. وقتی کاربر دکمه را کلیک کند، React آن تابع را اجرا می‌کند.

---

۴. رویداد با پارامتر — استفاده از Arrow Function

گاهی لازم داریم پارامتر به تابع رویداد بدهیم؛ نمی‌توانیم مستقیم onClick={myFunction(param)} بنویسیم چون آن تابع بلافاصله اجرا می‌شود.

راه درست:

function App() {
  const greet = (name) => {
    alert(`سلام ${name}!`);
  };

  return (
    <div>
      <button onClick={() => greet("علی")}>سلام به علی</button>
      <button onClick={() => greet("سارا")}>سلام به سارا</button>
    </div>
  );
}

📌 ما از arrow function داخل JSX استفاده کردیم تا تابع فقط زمان رویداد اجرا شود.

---

۵. رویدادهای پرکاربرد در React

React تقریباً همه رویدادهای DOM را پشتیبانی می‌کند، از جمله:

رویدادهای موس:

• onClick
• onDoubleClick
• onMouseEnter
• onMouseLeave
• onMouseMove

رویدادهای صفحه‌کلید:

• onKeyDown
• onKeyUp
• onKeyPress

رویدادهای ورودی فرم:

• onChange
• onInput
• onSubmit
• onFocus
• onBlur

---

۶. رویداد onChange — گرفتن مقدار از input

import { useState } from 'react';

function App() {
  const [text, setText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>متن وارد شده: {text}</p>
    </div>
  );
}

🔍 تحلیل:

• رویداد onChange روی <input> اجرا می‌شود هر بار که کاربر چیزی تایپ یا تغییر دهد.
• تابع رویداد (event) به ما یک Synthetic Event می‌دهد.
• event.target.value → مقدار فعلی input.

---

۷. رویداد Submit فرم

import { useState } from 'react';

function App() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault(); // جلوگیری از رفرش صفحه
    alert(`نام ارسال شده: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">ارسال</button>
    </form>
  );
}

📌 اینجا از event.preventDefault() استفاده کردیم چون فرم به‌صورت پیش‌فرض صفحه را رفرش می‌کند.

---

۸. دسترسی به ویژگی‌های رویداد

React تمام داده‌های رویداد را زیر شیء (event) قرار می‌دهد:

• event.target → عنصر هدف
• event.type → نوع رویداد (click, change, …)
• event.key → کلیدی که در صفحه‌کلید فشار داده شده (برای رویدادهای کیبورد)
• event.clientX و event.clientY → مختصات موس

مثال:

function App() {
  const clickHandler = (event) => {
    console.log(event.type); // "click"
    console.log(event.clientX, event.clientY); // مختصات
  };

  return <button onClick={clickHandler}>مختصات کلیک</button>;
}

---

۹. رویداد ترکیب‌شده — چند رویداد روی یک عنصر

function App() {
  const mouseEnterHandler = () => console.log("موس وارد شد");
  const mouseLeaveHandler = () => console.log("موس خارج شد");

  return (
    <div 
      style={{ padding: '50px', background: '#ccc' }}
      onMouseEnter={mouseEnterHandler}
      onMouseLeave={mouseLeaveHandler}
    >
      موس را روی این ناحیه ببرید و خارج کنید.
    </div>
  );
}

---

۱۰. نکات و خطاهای رایج

❌ استفاده از رشته به جای تابع:

// اشتباه
<button onClick="alert('سلام')">کلیک</button>

✅ باید تابع پاس بدهیم:

<button onClick={() => alert('سلام')}>کلیک</button>

❌ فراخوانی مستقیم تابع در JSX بدون arrow function → اجرا قبل از رویداد
❌ نداشتن event.preventDefault() در فرم‌های submit → باعث رفرش کل صفحه می‌شود
❌ تغییر state بر اساس event بدون استفاده از Callback در موارد پیچیده → ممکن است مقدار اشتباه شود

---

۱۱. رویداد اختصاصی در یک کامپوننت

می‌توان یک کامپوننت ساخت که رویداد خاصی دارد و والد آن را مدیریت می‌کند:

function Button({ onPress, label }) {
  return <button onClick={onPress}>{label}</button>;
}

function App() {
  const handlePress = () => alert("دکمه کلیک شد!");
  return <Button onPress={handlePress} label="کلیک کن" />;
}

📌 این باعث می‌شود کامپوننت‌ها قابل‌استفاده مجدد شوند و رفتار رویداد توسط والد تعیین شود.

---

۱۲. تمرین‌های پیشنهادی

1. یک input بساز که همزمان مقدارش را در صفحه نمایش دهد و تعداد کاراکترهای تایپ شده را بشمارد.
2. یک جعبه بساز که وقتی موس داخلش حرکت می‌کند، مختصات موس را در زمان واقعی نمایش دهد.
3. یک فرم بساز که بعد از ارسال، تمام مقادیر را در Console چاپ کند و فرم را خالی کند.

---

۱۳. جمع‌بندی

• رویدادها در React با camelCase نوشته می‌شوند (onClick, onChange, …).
• مقدار ویژگی‌های رویداد همیشه یک تابع است.
• React از سیستم Synthetic Event استفاده می‌کند تا روی همه‌ی مرورگرها یکسان کار کند.
• با رویدادها می‌توان تعامل کاربر با UI را کامل کنترل کرد.
• همیشه قبل از اجرای رویدادهایی که با فرم مرتبط هستند، به رفتار پیش‌فرض مرورگر فکر کنید (مثل رفرش در submit).