https://virgool.io/feed/@arminyahyaa front end developer at yeganehsoft.com . arminyahyaa@gmail.com fa 2026-04-15 08:11:57 https://files.virgool.io/upload/users/49734/avatar/Y1gd2r.png?height=120&width=120 https://virgool.io/@arminyahyaa https://virgool.io/iran-react-community/%D8%B3%D8%A7%D8%AE%D8%AA%D9%86-%D9%81%D8%B1%D9%85-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-%D8%A8%D8%A7-formstate-o3zuxil78pfl react-form فرم‌ها راه وارد کردن اطلاعات به داخل برنامه هستند و ما تو پروژه‌ها حتی اگه نیاز ورود اطلاعات نداشته باشیم که بعیده حداقل باید یه فرم لاگین رو بنویسیم. برای یکسری از برنامه‌های تحت وب تعداد فرم‌هایی که نیاز داریم میتونه خیلی زیاد باشه برای همین من پیشنهاد می‌کنم از 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 رو باز کنید و کد پایین رو در اونجا کپی کنید: https://gist.github.com/arminyahya/67bc57b04db5598a26b9abcd38d2d2fc همونطور که میبینید ما یک کلاس به اسم LoginFormState ساختیم و دوتا فیلد به نام‌های password و username در اون تعریف کردیم.دقت کنید برای تعریف از فیلدها از FieldState استفاده کردیم.پس ولیدیتورها چی؟برای ساختن validator فقط کافیه مشابه کد پایین عمل کنید: https://gist.github.com/arminyahya/6f9366e286847c4ed3479def921a0c32 برای validate کردن فیلدها لازمه از FormState این لایبری استفاده کنیم. متد رو هم برای دکمه submit نوشتیم.بعد از submit اول تمامی فیلدها ولیدیت میشن و اگه error نبود خط بعدی اجرا میشه که شما میتونید اونجا ajax بزنید یا ...این کلاسی که ساختیم حواسش به همه‌ی فیلدهامون هست در اصل یک Store برای فرمی که میخوایم بنویسیم هستش.فعلا کارمون با این کلاس تمومه بریم فایل form.tsx رو باز کنیم و کد زیر رو در اونجا قرار بدیم: https://gist.github.com/arminyahya/3260f954647912a22921c759d18766bd همونطور که میبینید برای تغییر مقدار فیلدها فانکشن اونارو صدا میکنیم. برای اینکه مطمئن بشید اون مقادیر واقعا تغییر میکنن میتونید این خط از کد رو به اون اضافه کنید:<div> {formData.username.value} </div> این خط باید مقدار username جدید رو بده ولی چرا نمیده؟چون formstate از mobx استفاده میکنه و برای اینکه فرمی که نوشتیم از تغییرات باخبر باشه ما باید از Observer استفاده کنیم.اول mobx و mobx-react رو نصب کنیدnpm install mobx mobx-react --saveحالا Observer رو میتونید بصورت زیر برای فرمتون تعریف کنید: https://gist.github.com/arminyahya/3460a4de95c941aca7f37171248f765d بجز این مورد که الان حل کردیم یک مشکل دیگه هم هست و اونم اینه که formdata که ما ساختیم هر بار که کامپوننت‌های بالایی این فرم تغییر میکنن دوباره ساخته میشه.برای حل این مشکل میتونید از این هوک استفاده کنید: https://gist.github.com/arminyahya/9ddeb23899baf09f2ea581f38c7a4bef https://gist.github.com/arminyahya/6ac6148816eaf147bb37f2e1c0aa7c43 این هوک چک میکنه که اگه این فرم وجود داره دیگه دوبازه نسازتش.الان فقط کافیه این فرمی که ساختیم رو داخل App.js قرار بدید.حرف آخرپیشنهاد میکنم این لایبری رو فقط اونایی استفاده کنن که mobx رو برای state management پروژشون انتخاب کردن چون جالب نیست که شما هم redux و هم mobx رو در پروژتون استفاده کنید. armin yahya armin yahya Fri, 05 Jul 2019 19:50:41 +0430