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

به طور کلی این قلاب یک آرایه با 2 بخش «حالت» (State) و 3 تابع بازگشت می‌دهد. در ادامه هر یک از این موارد را بررسی می‌کنیم.

متغیر فرم، حالت را به همراه تابع nChange و onClick برای همه بخش‌های حالت نمایش می‌دهد و این بدان معنی است که داده‌های اولیه فرم به صورت زیر در اختیار ما است:

متغیر فرم که از سوی قلاب بازگشت می‌یابد به صورت زیر خواهد بود:

بخش اعتبارسنجی پاسخ‌های اعتبارسنجی حاصل از valida-js را نگهداری می‌کند.

3 تابع دیگر به صورت زیر هستند:

  • validate: همه formData را به یک باره اعتبارسنجی می‌کند.
  • getData: یک شیء بازگشت می‌دهد که دارای همان امضای مقدار اولیه ارسالی به قلاب است.
  • setData: داده‌ها را از روی حالت تنظیم می‌کند و یک شیء با همان امضای پارامتر اولیه قلاب ارسال می‌کند.

استفاده از قلاب

ابتدا قلاب را از npm ایمپورت می‌کنیم و سپس آن‌ها را درون تابع کامپوننت قرار می‌دهیم.

قلاب به نام useValidatedForm را می‌توان دست‌کم در دو پارامتر مورد استفاده قرار داد که یکی داده‌های اولیه برای فرم است (که باید طرح‌بندی کامل داده‌ها باشد) و پارامتر دوم آرایه قواعد اعتبارسنجی است. این قواعد اعتبارسنجی برای valida-js استفاده خواهد شد.

اینک مقدار بازگشتی از قلاب و شیوه مقداردهی اولیه آن را می‌دانیم. در ادامه فرم کوچکی را به وسیله آن می‌نویسیم:

بخش‌های مهم به شرح زیر هستند:

در ابتدا بررسی می‌کنیم که در صورتی که مشخصه‌ای خطا داشته باشد، چگونه باید آن را بخوانیم. شاید بهتر بود که یک تابع برای انجام این کار می‌نوشتیم، اما فعلاً از همین منطق ساده استفاده می‌کنیم. اگر آرایه‌‎‌ای از خطاهای یک مشخصه، طولی بلندتر از 0 داشته باشید به این معنی است که خطایی رخ داده است و در غیر این صورت فرض ما این است که خطایی وجود ندارد.

بخش مهم دیگر به صورت زیر است:

جایی که شیء ورودی firstName را افراز می‌کنیم به این معنی است که props را به ورودی value، دستگیره onClick و دستگیره onChange می‌فرستیم. به این ترتیب قصد داریم متادیتای مشخصه را به‌روزرسانی کنیم. همچنین مقدار ورودی را زمانی که کاربر در ورودی می‌نویسد به‌روز کرده و اعتبارسنجی در مورد مشخصه خاص فرم را نیز به‌روزرسانی می‌کنیم. از این رو validation.errors.firstName نیز در این حالت به‌روزرسانی می‌شود.

یکی از موضوعات شگفت‌انگیز در این مورد آن است که اینک می‌توانیم کامپوننت‌های کنترل را بسازیم و validation.property، form.property و منطق دقیق را برای قرار دادن خطا و کلاس‌ها در آنجا ارسال کنیم.

در این مثال تنها از یکی از قلاب‌های موجود روی React یعنی useState استفاده کردیم، اما شما می‌توانید به بررسی قلاب‌های دیگر و روش استفاده از آن‌ها نیز بپردازید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

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

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *