سلام! امیدوارم که حالتون خوب باشه و از نظر جسم و روح در سلامت کامل باشید.
موضوع این پست شاید تکراری بنظر بیاد ولی اینطور نیست. من کلا سعی میکنم از نوشتن موضوعاتی که خیلی تکراری هستن دوری کنم.
اگر نمیدونید چطور فرم ها در ری‌اکت کار میکنن به اینجا سر بزنید.
توی این پست، میخوام یه روش برای هندل کردن فرم ها بدون نیاز به استیت (یعنی به صورت uncontrolled) بگم.
در پست بعدی باهم یه کاستوم هوک شبیه Formik میسازم!
اولین نکته ای که باید بهش اشاره کنم این هست که هندل کردن فرم ها به روش uncontrolled یکسری معایب و مزایا داره اما بسته به استفاده شما فرق میکنه، گاهی پروژه ای دارید که نیازی به اون قابلیت ها ندارید و مزایاش (مثلا پرفورمنس) براتون مهم‌تر هست.
من برای validation از Joi استفاده میکنم ولی شما میتونید از Yup هم استفاده کنید.
پیشنهاد: داخل src پروژتون یک فولد با نام utils ایجاد کنید و این فایل رو اونجا قرار بدید.
یک فایل به نام handleForms بسازید و داخلش اینطور عمل میکنیم (همونطور که در vanilla js عمل میکنیم)
handleForms.js
خب حالا سمت کامپوننت هامون اونجایی که میخوایم فرم داشته باشیم اینطور می‌نویسیم:
VirgoolForm.js
اینجا چندین تا input داریم و اگر submit کنیم میبینیم که به راحتی اطلاعات داخل فرم هارو توی کنسول داریم.
حالا بریم validation اضافه کنیم.
داخل VirgoolForm رو به این صورت تغییر میدیم:
تغییراتی که ایجاد کردیم رو بررسی کنیم. از بالا به پایین اول، Joi رو ایمپورت کردیم.
یک مدل یا schema برای فرممون نوشتیم. برای اطلاع از متد های schema اینجا رو ببینید.
تغییر بعدی داخل فانکشن handleSubmit هست که بخاطر validation اینکارو کردیم. (میتونید روش متفاوتی رو پیش بگیرید)
و حالا فایل handleForm رو باز کنید و به صورت زیر تغییرش بدید:
اینجا formValues رو با schema مقایسه میکنیم و اگر مشکلی بود ارور رو throw میکنیم. (شما میتونید return کنید که دیگه از try و catch استفاده نکنید)
درباره معایب این روش گفتم اما مزایا این روش:
ممنونم از اینکه وقت گذاشتید و مطالعه کردید! امیدوارم بتونید ازش استفاده مفید رو ببرید.
خیلی خوشحال میشم اگر نظراتتون یا تجربه هاتون در این زمینه رو با من توی قسمت کامنت ها به اشتراک بگذارید. این پست انگیزه نوشتن این ویرگول رو برای من ایجاد کرد.
منتظر قسمت دوم باشید!
