سلام! امیدوارم که حالتون خوب باشه و از نظر جسم و روح در سلامت کامل باشید.
توی این پست قراره یه چیزی شبیه Formik (البته ساده‌تر) بسازیم.
ساختن این برای خودم جذاب بود، امیدوارم برای شماهم همینطور باشه.
خب اول از بریم ببینیم Formik چطور کار میکنه. اینجا آموزش استفاده‌ش رو گذاشته.
اولین مثالی که زده این هست. اسکرین شات از کدش رو اینجا میذارم که راحت‌تر بشه بررسی کنیم.
خب از بالا به پایین که حرکت کنیم میبینیم یک هوک به اسم useFormik داریم که همه کار رو هندل میکنه.
داخلش یک initialValues داده و یک فانکشن on Submit پایین‌تر توی تگ form برای on Submit از formik.handleSubmit استفاده کرده. و داخل تگ input برای on Change از formik.handleChange و برای value از formik.values.email استفاده کرده.
پس خروجی هایی که ما از formik میگیریم به این صورت هست: handle Change, handle Submit, values
پس ما هم باید یک هوک بسازیم که این خروجی هارو داشته باشه. وب‌سایت خود ری‌اکت این راهنما رو برای ساخت هوک دلخواه داره.
من اسم هوک رو میذارم useForm و یک ساختار کلی به صورت زیر میشه.
handleForm . js
پارامتر formCustomValues رو به عنوان آبجکتی درنظر میگیریم که initialValues رو میگیره و پارامتر formSubmitFunction رو آبجکتی که رو درنظر میگیره.
برای هندل کردن فرم ها در ری‌اکت به صورت controlled component ما نیاز به یک state (که شامل value و name فیلد ما هست) و یک handleChange داریم. اگر درباره این موضوع نمیدونید، این صفحه رو ببینید. خب پس بیایم این هارو وارد useForm کنیم.
* نکته: به formCustomValues و formSubmitFunction یک آبجکت خالی به عنوان مقدار اولیه بدین.
اینجا initialValues رو که توی کامپوننت مشخص کردیم رو میگیریم و میذاریمش توی state.
متد handle Change واضحه پس توضیح خاصی نداره، فقط بگم که یک ورودی event میگیره که من اون رو destructure کردم و متد currentTarget رو از event گرفتم و renameش کردم به input برای استفاده ساده‌تر.
توی return هم که value داخل state رو برمیگردونیم. پس تا اینجا values و handle Change رو ساختیم.
بریم سراغ handleSubmit.
خب همونطور که توی کد Formik دیدم یک مقدار on Submit رو هم پاس میدیم داخل هوک‌مون.
پس کد ما تا اینجا به این صورت میشه:
خب! بنظر میاد تا اینجا هوک ما کامل شده! بریم پس تستش کنیم. کد زیر رو به عنوان مثال مینویسیم:
خب! بنظر میاد که همه چیز به خوبی کار میکنه! تبریک میگم الان یک هوک ساده در عین حال کاربردی برای هندل کردن فرم ها داریم که کار مارو خیلی سریع‌تر میکنه و حجم خیلی کمی داره!
من توی تایم آزادم امکان validation رو هم به این هوک استفاده کردم که کدش رو از اینجا میتونید ببینید.
من اینجا از برای validation از Joi استفاده کردم (مثال استفاده شده) اما این قابلیت رو هم داره که مثل این خودتون به صورت دستی براش validation بنویسید. (اگر واضح نبود حتما پیام بدید)
اگر درخواست باشه میتونم این رو تو یه پست دیگه کامل توضیحش بدم، توی این پست سعی کردم کد رو خلوت نگه‌دارم.
ممنون از وقتی که گذاشتید و این پست رو مطالعه کردید. امیدوارم براتون مفید بوده باشه.
