رویداد‌ها ری‌ اکت

رویداد چیست؟

رویدادها (Events) اتفاقاتی هستند که در صفحه وب رخ می‌دهند؛ مثل کلیک روی یک دکمه، تایپ در فیلد متنی، حرکت ماوس یا فشردن کلیدی از صفحه‌کلید.

در ری‌اکت، می‌توانید به این رویدادها گوش دهید و زمانی که رخ می‌دهند، واکنش موردنظر خود را اجرا کنید.

چطور رویداد‌ها را مدیریت کنیم؟

در ری‌اکت، برای مدیریت رویدادها از ویژگی‌هایی مانند onClick، onChange، onSubmit و... استفاده می‌کنیم.

این ویژگی‌ها را به تگ‌های JSX اضافه می‌کنیم و یک تابع به آن‌ها اختصاص می‌دهیم تا در هنگام وقوع رویداد اجرا شود.

function Button() {
  const handleClick = () => {
    alert("Button Clicked!");
  };

  return <button onClick={handleClick}>Click Here</button>;
}

انواع رویداد‌ها

ری‌اکت از بسیاری از رویدادهای استاندارد HTML پشتیبانی می‌کند. در ادامه، چند مورد از پرکاربردترین آن‌ها را با هم مرور می‌کنیم:

onClick: برای واکنش به کلیک روی عناصر.
onChange: برای زمانی که مقدار یک ورودی (مثل فیلد متنی یا چک‌باکس) تغییر می‌کند.
onSubmit: برای مدیریت ارسال فرم‌ها.
onMouseOver: وقتی نشانگر موس روی یک عنصر قرار می‌گیرد.
onKeyDown: وقتی کاربر یکی از کلیدهای کیبورد را فشار می‌دهد.

نکته: اسم رویدادها رو باید با فرمت camelCase بنویسید (مثل onClick نه onclick).

رویداد onClick

زمانی اجرا می‌شود که کاربر روی یک عنصر (مثل دکمه) کلیک کند.

function ClickExample() {
  function handleClick() {
    alert("Button Clicked!");
  }

  return <button onClick={handleClick}>Click Here</button>;
}

نکته: برای ویژگی‌های رویداد، باید یک تابع تعریف‌شده را به‌عنوان مقدار بدهید، نه یک رشته یا مقدار دیگر

رویداد onChange

زمانی که مقدار یک فیلد ورودی تغییر کند (مثلاً تایپ در input).


function ChangeExample() {
  function handleChange(event) {
    console.log("New Value:", event.target.value);
  }

  return <input type="text" onChange={handleChange} />;
}

نکته: تابعی که به رویداد نسبت می‌دهید، یک شیء رویداد دریافت می‌کند. این شیء اطلاعاتی مثل عنصر هدف (event.target)، نوع رویداد، و موارد دیگر را در اختیار شما قرار می‌دهد.

رویداد onSubmit

وقتی یک فرم ارسال (submit) می‌شود.


function SubmitExample() {
  function handleSubmit(event) {
    event.preventDefault(); // جلوگیری از رفتار پیش‌فرض فرم
    alert("Form Submited!");
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

رویداد onMouseOver

زمانی که موس روی یک عنصر قرار می‌گیرد.


function MouseOverExample() {
  function handleMouseOver() {
    console.log("Mouse Moved On The Element!");
  }

  return <div onMouseOver={handleMouseOver}>Move Your Mouse Here</div>;
}

رویداد onKeyDown

زمانی که کلیدی روی کیبورد فشرده می‌شود.


function KeyDownExample() {
  function handleKeyDown(event) {
    console.log("Key Pressed:", event.key);
  }

  return <input type="text" onKeyDown={handleKeyDown} />;
}

رویداد‌ها و وضعیت

رویدادها معمولاً با استیت (state) ترکیب می‌شن تا داده‌ها رو تغییر بدن و رابط کاربری رو به‌روزرسانی کنن.

در این مثال، با کلیک روی دکمه، مقدار شمارنده یک واحد افزایش پیدا می‌کند:

import { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Click Count: {count}</p>
      <button onClick={handleClick}>Click Here</button>
    </div>
  );
}

نکته: برای تغییر مقدار state همیشه از تابع setState استفاده کنید (مثل setCount) و هیچ‌وقت مقدار state رو به‌صورت مستقیم تغییر ندید.

خلاصه درس

در این درس یاد گرفتیم:

رویدادها چه هستند و چگونه در ری‌اکت مدیریت می‌شوند.
چگونه از رویدادهای مختلف مانند onClick، onChange و onSubmit استفاده کنیم.
چگونه رویدادها را با state ترکیب کنیم تا رابط‌های کاربری تعاملی بسازیم.

تمرین

مشاهده پاسخ

توسعه دهندگان

نیما عراقی