رویدادهای کلیک، تغییر، ارسال و ...

مقدمه

در درس قبل با اصول اولیه اتصال event handlerها در React آشنا شدیم. اکنون به بررسی چند مورد از رایج‌ترین رویدادهایی که در ساخت اپلیکیشن‌های وب با آنها سروکار داریم، می‌پردازیم. React یک پوشش (wrapper) بر روی سیستم رویداد بومی مرورگر به نام SyntheticEvent ایجاد می‌کند تا از سازگاری رفتار رویدادها در مرورگرهای مختلف اطمینان حاصل کند.

رویداد کلیک (onClick)

این رایج‌ترین رویداد است و زمانی اجرا می‌شود که کاربر روی یک عنصر (معمولاً یک دکمه) کلیک می‌کند. ما قبلاً با این رویداد در مثال‌های state آشنا شده‌ایم.

JAVASCRIPT (React)

function SignupButton() {
  function handleSignup() {
    alert('Redirecting to signup page...');
  }

  return <button onClick={handleSignup}>Sign Up</button>;
}

در این مثال، تابع handleSignup به رویداد onClick دکمه متصل شده است و با هر کلیک، یک پیام هشدار نمایش داده می‌شود.

رویداد تغییر (onChange)

رویداد onChange برای عناصری مانند <input>، <textarea> و <select> بسیار حیاتی است. این رویداد هر بار که مقدار ورودی تغییر می‌کند، اجرا می‌شود. ما از این رویداد برای به‌روزرسانی state و ساخت «کامپوننت‌های کنترل‌شده» (Controlled Components) استفاده می‌کنیم.

JAVASCRIPT (React)

import { useState } from 'react';

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

  function handleChange(event) {
    // The event object gives us access to the input's value
    setName(event.target.value);
  }

  return (
    <>
      <input value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </>
  );
}

در این کد، event handler ما (handleChange) یک پارامتر event دریافت می‌کند. این یک شیء SyntheticEvent است که اطلاعاتی درباره رویداد رخ داده را در خود دارد. ما می‌توانیم از event.target.value برای دسترسی به مقدار فعلی فیلد ورودی استفاده کرده و state را با آن به‌روزرسانی کنیم.

رویداد ارسال (onSubmit)

رویداد onSubmit روی تگ <form> قرار می‌گیرد و زمانی اجرا می‌شود که فرم ارسال شود (معمولاً با کلیک روی یک دکمه type="submit" یا فشردن کلید Enter).

جلوگیری از رفتار پیش‌فرض

رفتار پیش‌فرض مرورگر هنگام ارسال یک فرم، رفرش کردن کامل صفحه است. در یک اپلیکیشن تک-صفحه‌ای React، ما هرگز نمی‌خواهیم این اتفاق بیفتد. برای جلوگیری از این رفتار، باید متد event.preventDefault() را در event handler خود فراخوانی کنیم.

JAVASCRIPT (React)

function SearchForm() {
  function handleSubmit(event) {
    event.preventDefault();
    alert('Searching...');
    // In a real app, you would process the form data here
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Search..." />
      <button type="submit">Search</button>
    </form>
  );
}

در این مثال، تابع handleSubmit ابتدا event.preventDefault() را فراخوانی کرده و سپس منطق مربوط به جستجو را اجرا می‌کند. این کار تضمین می‌کند که صفحه رفرش نشده و تجربه کاربری روان SPA حفظ شود.

در این درس، با چند مورد از پرکاربردترین رویدادها در React و نحوه مدیریت آنها آشنا شدیم. دیدیم که چگونه می‌توان به ورودی‌های کاربر مانند کلیک، تغییر در فیلدهای فرم و ارسال فرم واکنش نشان داد و چگونه با استفاده از شیء رویداد، از رفتارهای پیش‌فرض مرورگر جلوگیری کرد. در درس بعدی، به «ارسال پارامتر و مدیریت رفتار پیش‌فرض» با جزئیات بیشتری خواهیم پرداخت.