ساختن فرم در ریکت با formstate

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

اگه create-react-app رو نصب دارید به مرحله بعدی برید

npm install -g create-react-app

یک پروژه typescript با ریکت بسازید

create-react-app simplelogin --typescript

لایبری رو نصب کنید

npm install formstate --save

در محل src پروژه سه فایل با نام‌های form.tsx و formstate.ts و hooks.ts بسازید.

فایل Formstate.ts رو باز کنید و کد پایین رو در اونجا کپی کنید:

همونطور که میبینید ما یک کلاس به اسم LoginFormState ساختیم و دوتا فیلد به نام‌های password و username در اون تعریف کردیم.

دقت کنید برای تعریف از فیلدها از FieldState استفاده کردیم.

پس ولیدیتورها چی؟

برای ساختن validator فقط کافیه مشابه کد پایین عمل کنید:

برای validate کردن فیلدها لازمه از FormState این لایبری استفاده کنیم. متد رو هم برای دکمه submit نوشتیم.

بعد از submit اول تمامی فیلدها ولیدیت میشن و اگه error نبود خط بعدی اجرا میشه که شما میتونید اونجا ajax بزنید یا ...

این کلاسی که ساختیم حواسش به همه‌ی فیلدهامون هست در اصل یک Store برای فرمی که میخوایم بنویسیم هستش.

فعلا کارمون با این کلاس تمومه بریم فایل form.tsx رو باز کنیم و کد زیر رو در اونجا قرار بدیم:

همونطور که میبینید برای تغییر مقدار فیلدها فانکشن اونارو صدا میکنیم.

برای اینکه مطمئن بشید اون مقادیر واقعا تغییر میکنن میتونید این خط از کد رو به اون اضافه کنید:

<div> {formData.username.value} </div>

این خط باید مقدار username جدید رو بده ولی چرا نمیده؟

چون formstate از mobx استفاده میکنه و برای اینکه فرمی که نوشتیم از تغییرات باخبر باشه ما باید از Observer استفاده کنیم.

اول mobx و mobx-react رو نصب کنید

npm install mobx mobx-react --save

حالا Observer رو میتونید بصورت زیر برای فرمتون تعریف کنید:

بجز این مورد که الان حل کردیم یک مشکل دیگه هم هست و اونم اینه که formdata که ما ساختیم هر بار که کامپوننت‌های بالایی این فرم تغییر میکنن دوباره ساخته میشه.

برای حل این مشکل میتونید از این هوک استفاده کنید:

این هوک چک میکنه که اگه این فرم وجود داره دیگه دوبازه نسازتش.

الان فقط کافیه این فرمی که ساختیم رو داخل App.js قرار بدید.

حرف آخر

پیشنهاد میکنم این لایبری رو فقط اونایی استفاده کنن که mobx رو برای state management پروژشون انتخاب کردن چون جالب نیست که شما هم redux و هم mobx رو در پروژتون استفاده کنید.