آموزش ریکت(قسمت پنجم)

سلام. امیدوارم حالتون خوب باشه.

توی این قسمت از آموزش ریکت، قراره بریم سراغ ایونت ها. اگر قسمت قبلی این سری مقاله ها رو نخوندید، پیشنهاد میکنم حتما بخونید.

توی 4 قسمت قبل از این آموزش، هیچ حرفی راجع به ایونت ها نزدم. اینکه چجوری ایونت ست میکنیم و چیزای دیگه. به احتمال خیلی زیاد اگه الان دارید این آموزش رو میخونید، با ایونت ها و نحوه اضافه کردن ایونت ها توی جاوا اسکریپت خام، آشنایی دارید. میدونید که برای اضافه کردن ایونت به المنت های دام از طریق جاوا اسکریپت باید از متد addEventListener استفاده کنید و توی این متد نوع ایونت و کالبک فانکشن رو به عنوان آرگومان بهش بدید. باید بگم که توی ریکت، به کلی با اضافه کردن ایونت به دام خداحافظی کنید. چون دیگه ما با این روش به المنتای دام ایونت اضافه نمیکنیم. ما میخوایم به المنتای ریکتی ایونت اضافه کنیم. اضافه کردن ایونت به المنتای ریکتی با اضافه کردن ایونت به المنتای دام، سه تا تفاوت داره:

1- توی ریکت، ایونت ها با حروف کمل کیس اضافه میشن به المنتای ریکتی. یعنی حرف کلمه اول کوچیک و حرف کلمه دوم به بعد بزرگ نوشته میشه. ولی توی کد های اچ تی ام ال، مثلا میخواستیم ایونت کلیک به یه دکمه اضافه کنیم، باید اسم ایونت رو مینوشتیم ولی توی ریکت باید بنویسیم

2- توی ریکت، به جای اینکه به ایونتمون به صورت استرینگ یه فانکشن بدیم، خود فانکشن رو میدیم. توی اچ تی ام ال باید به یه تگ باتن اینجوری فانکشن رو به ایونت میدادیم:

<button ="hello()">say hello</button>

ولی توی ریکت باید اینجوری فانکشن رو به ایونت بدیم:

<button ={hello}>say hello</button>

روش سوم: یه چیز دیگه که بین ست کردن ایونت توی المنتای ریکتی با المنتای اچ تی ام ال فرق هست اینه که توی اچ تی ام ال برای جلوگیری از عملکرد دیفالت یه المنت، میتونید مقدار فالس ریترن کنید. ولی توی ریکت باید حتما از e.preventDefault() استفاده کنید برای جلوگیری از اجرای عملکرد دیفالت یه المنت. به این شکل:

function Form() {
  function handleSubmit(e) {
    e.preventDefault();    console.log('You clicked submit.');
  }

  return (
    <form ={handleSubmit}>
      <button type=&quotsubmit&quot>Submit</button>
    </form>
  );
}

احتمالا میتونید حدس بزنید اینجا e به چه معناست. در اینجا ریکت یه سری اطلاعات راجع به المنت واسه ایونت هندلر ارسال میکنه که یه نمونش که اینجا هست همین فانکشن preventDefault هست. دقت کنید که اطلاعاتی که ریکت به عنوان آرگومان واسمون میفرسته یکمی متفاوت هستن که به اونا در اینجا نمیپردازم.

همونجور که گفتم توی ریکت دیگه واقعا نیازی به استفاده از متد اد ایونت لیسنر نیست و فقط کافیه ایونتتون رو توی تگ جی اس ایکسی وارد کنید. مشابه کد های بالا. و اینکه هر ایونت ریکتی هم با on شروع میشن. مثلا .

توی ریکت توی کلاس کامپوننت ها، یه الگوی پر استفاده برای تعریف ایونت هندلر ها، تعریف کردن اون ها به عنوان متدی از کلاس هست و بعد پاس دادن اون به ایونت. البته میتونید متدتون رو توی همون ایونت هم بنویسید. مشکلی پیش نمیاد. ولی یه چیزی نیازه که خیلی بهش توجه داشته باشید.

وقتی شما میخواید ایونت هندلرتون که توی کلاستون هست رو بفرستید به ایونت توی جی اس ایکس، حتما باید اون رو bind کنید به کلاستون. در غیر این صورت this توی متدتون undefind میشه و عملیات انجام نمیشه. البته در صورتی که متدتون با یه عضو از کلاستون کار داشته باشه مثل استیت یا یه پراپرتی از کلاستون و... .

به سه روش میتونید توی کلاس کامپوننتا ایونت هندلرتون رو به کلاستون بایند کنید:

روش اول: میتونید بعد از تعریف متدتون، بایند شده متدتون رو ذخیره کنید. به این شکل:

روش دوم:

روش سوم:

میتونید متدتون روی توی کالبک ساخته شده توی ایونت هم صدا بزنید. البته با این روش باعث میشید که با هر بار ری رندر شدن کامپوننتتون، اون کالبک دوباره ساخته بشه. و اگر اون کالبک رو به عنوان پراپ به کامپوننتای دیگه بفرستید میتونه باعث ری رندرینگ اضافی اون کامپوننتا بشه که واسه پرفورمنس مضر هست. پس یا از روش اول استفاده کنید، یا از روش دوم.

اضافه کردن آرگومان به ایونت هندلر

بعضی موقه ها ممکنه بخواید آرگومان اضافه به ایونت هندلرتون بفرستید. برای اینکه آرگومان اضافی به ایونت هندلر بفرستید، کافیه بعد از اولین آرگومان متد bind که اسکوپ رو مشخص میکنه، آرگومانتونو بفرستید. البته اگه میخواید آبجکت اطلاعات المنتو هم دریافت کنید حتما واسه اون هم آرگومان تعریف کنید. و اینکه ریکت آبجکت مشخصات المنت رو همیشه به عنوان آخرین آرگومان به متدتون میفرسته اگر از روش کالبک استفاده نکنید. به این شکل:

اگر از نوع کالبک استفاده میکنید، میتونید آبجکت اطلاعات رو به هر آرگومانی که دوست داشتید به متدتون پاس بدید.

خب. امیدوارم ازین قسمت خوشتون اومده باشه. اگر با متد bind آشنا نیستید، حتما راجع بهش سرچ کنید. منتظر قسمت بعدی این سری از مقاله ها باشید.

اگه دوست داشتید لایک کنید مقاله مو. اگه دوست داشتید دنبال کنید من رو. اگه دوست داشتید یه کامنت مثبت و یا انتقاد منطقی بزارید واسم. خلاصه هرکاری دوست داشتید توی زندگیتون انجام بدید؛ هرکاری که به کسی آسیب نزنه و یا غمگینش نکنه :)