آموزش React مقدماتی قسمت ششم: Event Handling

قسمت ها

مدیریت event های کاربر تقریباً در هر برنامه وب React بخشی اساسی است. در این قسمت از سری آموزش React مقدماتی، شما یاد خواهید گرفت که چگونه در برنامه React خود رویدادهای استاندارد کاربر را مدیریت کنید. بنابراین ما می خواهیم برنامه کاربردی نمونه خود را با یک قسمت ورودی جدید گسترش دهیم که کاربر برای وارد کردن یک عبارت جستجو از آن استفاده خواهد کرد. برای این قسمت، شما یاد خواهید گرفت که چگونه رویداد های Change و KeyPressed را با افزودن توابع مربوط به event handler، در کامپوننت مدیریت کنید.

افزودن فیلد Input جستجو

اولین قدم افزودن label و input جدید به کامپوننت App است:

مدیریت رویداد Change در یک فیلد input

اکنون ما آماده ایم که یک event handler برای change به قسمت searchInput اضافه کنیم. این کار با اضافه کردن ویژگی onChange به عنصر ورودی و اختصاص یک تابع کنترل کننده (handler function) همانطور که در کد زیر مشاهده می کنید انجام می شود:

handler function به نام handleSearchInputChange نامگذاری شده و مستقیماً در داخل کاپوننت App پیاده سازی می شود. باز هم ما برای تعریف آن تابع از نحو arrow function استفاده می کنیم. handleSearchInputChange یک پارامتر می گیرد: event. این شی شامل کلیه اطلاعات مربوط به event (رویداد) است.

دستیابی به مقدار فیلد ورودی در تابع کنترل کننده رویداد

شی event می تواند به طور مثال برای دسترسی به مقدار فیلد ورودی و چاپ آن در کنسول استفاده شود:

const handleSearchInputChange = event => {
    console.log(event.target.value);
}

با باز کردن کنسول مرورگر، هر زمان که مقدار ورودی را تغییر می دهید، خروجی مربوطه برای شما چاپ می شود:

10.png

افزودن یک Event Handler برای رویداد KeyPress

بیایید یک event handler دیگر به قسمت ورودی اضافه کنیم. همچنین رویداد KeyPressed را که هر بار فشار دادن یک کلید فراخوانی می شود، بگیریم:

در اینجا تابع رویداد handleSearchInputKeyPress را که در داخل کامپوننت App نیز پیاده سازی شده است اختصاص می دهید:

در داخل این تابع event handler، بررسی می کنیم که کلید enter فشرده شده است. در این صورت یک خروجی مربوط به کنسول ایجاد می شود:

20.png

در قسمت زیر می توانید دوباره کد کامل App.js را مشاهده کنید:

در قسمت بعد می خوانید

در قسمت بعدی از این مجموعه آموزش React مقدماتی، ما در مورد React state و اینکه چگونه مدیریت state می تواند به ما در مدیریت داده ها در بین کامپوننت های برنامه React کمک کند، آشنا خواهیم شد.

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: