React – ایجاد form داینامیک و Component های Modal
شناسه پست: 3561
بازدید: 1018

با استفاده از رویکرد ایجاد فرم داینامیک، قصد داریم یک کامپوننت form جدید برای post action ها و همچنین component های modal را برای نمایش پیغامهای موفقیت آمیز و خطا ایجاد کنیم. قصد داریم از این component های modal در هر component والدی که به آنها نیاز دارند، استفاده نماییم (reuse). علاوه بر این، قصد داریم تمام فیلدهای input از فایل config را به صورت داینامیک ایجاد کنیم، زیرا ما میخواهیم کد ما قابلیت استفاده مجدد (reusable) را داشته باشد. قسمت reusability یکی از عالیترین مزیتهای رویکرد ایجاد form به صورت داینامیک است.

پس بریم که شروع کنیم.

اگر میخواهید تمام دستورالعملهای پایه و راهنمای کامل برای آموزش سریالی NET Core. را ببینید، این لینک را بررسی کنید: دستورالعملهای کار با NET Core.

این مقاله، قسمتی از مجموعه آموزشی زیر میباشد:

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

برای بررسی قسمت قبل، به این لینک مراجعه کنید:  مدیریت خطا در React

جهت دانلود سورس بر روی این لینک کلیک کنید: سری آموزشی React – قسمت 6

این مقاله به قسمتهای زیر تقسیم میشود:

Component های پنجره Success Modal و Error Modal

با ایجاد ساختار پوشه ای زیر در پوشه component، کار خود را شروع میکنیم:

ساختار پوشه Modal

اول از همه قصد داریم فایل SuccessModal.js را اصلاح کنیم:

این کد کاملا واضح است. ما اینجا داریم داخل این کامپوننت functional، از کامپوننتهای react-bootstrap برای modal  استفاده میکنیم. ما از طریق آبجکت props، پارامترهای مختلف و همچنین یک event را به modal خود ارسال میکنیم. این event قرار است زمانی که ما بر روی button کلیک میکنیم، modal را ببندد.

حالا فایل ErrorModal.js را به همین شیوه اصلاح میکنیم:

در آخر باید فایل ModalStyles.css را اصلاح کنیم:

عالی.

حالا ما component های modal خود را داریم که میتوانیم از آنها برای component های Create، Update یا هر component دیگری استفاده کنیم. ما عمداً دو کامپوننت modal ایجاد کرده‌ایم، حتی اگرچه آنها تقریباً یکسان هستند، اما زمانیکه از کامپوننتهای modal در داخل component های والد استفاده می‌کنیم خودشان را بیشتر نشان میدهند. فقط با نگاه کردن به نام modal می توانید فوراً تشخیص دهید که هدف modal چیست.

ایجاد تنظیمات Input

داخل پوشه src، قصد داریم پوشه Utility و سپس داخل آن یک فایل جدید به نام InputConfiguration.js را ایجاد کنیم. در این فایل، ما قصد داریم تمام تنظیمات پیکربندی خود برای عناصر (name, address, dateOfBirth) input که قرار است در form های create و update مورد استفاده قرار بگیرند را ذخیره کنیم.

ما قبلا کتابخانه moment را نصب کرده ایم. در پست قبلی، اگر هنوز آن را نصب نکرده اید، لطفا با استفاده از دستور زیر آن را نصب کنید (ما به آن برای کنترل datepicker نیاز داریم):

حالا فایل InputConfiguration.js را اصلاح میکنیم:

بعداً، در کامپوننت create خود، میخواهیم این آبجکت را به آرایه‌ای از آبجکتها تبدیل کنیم و آن را به کامپوننت Input بفرستیم تا تمام فیلدهای input مورد نیاز در form ایجاد شود. این آرایه قرار است شامل آبجکتها (زوجهای key-value) باشد که key قرار است name یا address یا dateOfBirth (ویژگیهای آبجکت بالا) و value  قرار است قسمت کامل تنظیمات همین آبجکت (type, value, element…) باشد.

ایجاد عناصر Input به صورت داینامیک

اولین کاری که باید انجام دهیم نصب کتابخانه react-datepicker است. زیرا برای کنترل dateOfBirth به آن نیاز داریم.

برای این منظور، این دستور را اجرا کنید:

نصب کتابخانه React-datepicker

حال در پوشه src، پوشه UI را ایجاد میکنیم. داخل آن، قصد داریم یک پوشه جدید به نام Input و داخل این پوشه، فایلهای Input.js و Input.css را ایجاد میکنیم:

ساختار پوشه Input

فایل Input.js قرار است یک کامپوننت functional باشد، پس آن را طبق روال زیر اصلاح میکنیم:

در حال حاضر، ما فقط میخواهیم تمام resource های مورد نیاز خود را import کرده، فیلد input و error message را initialize کنیم و مقدار را برای error message در صورتی که control نامعتبر است و باید اعتبارسنجی شود و همچنین در صورتی که touche شده باشد، تنظیم میکنیم. اگر کاربر اصلاً نشانگر ماوس را داخل آن component قرار نداده باشد، نمی‌خواهیم خطا را نشان دهیم. در نهایت، ما این فیلد input (که فعلاً null است) را به component والد برمی‌گردانیم.

در زیر دستور if و بالای بلوک return، کد زیر را برای پر کردن ویژگی inputField اضافه می کنیم:

اینجا ما با بین نوع element ها switch کردیم و اگر element مورد نظر از نوع input باشد، در نتیجه فیلد input را به همراه تمام ویژگیها و event های مورد نیاز آن ایجاد میکنیم. ما همین کار را برای کنترل datePicker نیز انجام دادیم. برای form های ما، این دو نوع input کافی میباشد. اما اگر هریک از پروژه های شما، به کنترلهای بیشتری نیاز داشته باشند، خیلی ساده میتوانید عبارت case را برای آن کنترلهای مورد نظر خود نیز اینجا اضافه کنید.

یک کار دیگر که باید انجام دهید اصلاح فایل Input.css است:

در این class، ما برخی از کلاسهای ذاتی خود datePicker را override کرده و یک class سفارشی را به آن اضافه کرده ایم (.datePickerControl).

تمام. اکنون می توانیم با کامپوننت CreateOwner به کار خود ادامه دهیم.

کامپوننت CreateOwner

در پوشه containers و سپس داخل پوشه Owner، یک پوشه جدید ساخته و نام آن را CreateOwner بگذاریم. داخل این پوشه، یک فایل جدید به نام CreateOwner.js ایجاد میکنیم.

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

در کد بالا، ما تمام component های ضروری react-bootstrap و تابع returnInputConfiguration از فایل InputConfiguration.js را import کرده ایم. این component یک class component یا یک stateful component است و در componentWillMount lifecycle hook، ما local state خود را با تمام تنظیمات form آپدیت میکنیم. compnentWillMount hook بلافاصله قبل از تمام component mount ها trigger میشود.

اجازه دهید کد دیگری را بین بلاکهای render و return اضافه کنیم:

در تابع convertStateToArrayOfFormObjectsfuncition، میخواهیم آبجکت ownerForm را به آرایه ای از آبجکتها، برای ارسال آن به کامپوننت Input تبدیل کنیم. پس اجازه دهید این تابع را در یک فایل جداگانه اضافه کنیم.

داخل پوشه Utility یک فایل جدید به نام FormUtility.js ایجاد کنید. این فایل را با اضافه کردن function زیر برای تبدیل آبجکت به آرایه اصلاح کنید:

ما باید این function را به داخل فایل CreateOwner.js ایمپورت کنیم:

ما میخواهیم action های بیشتری را داخل فایل FormUtility.js داشته باشیم. از این جهت، تمام آن action ها را داریم در کامپوننت CreateOwner.js ایمپورت میکنیم.

ما اینجا formElementsArray را پر کرده ایم. پس بیایید از آن برای ارسال تمام ویژگیها به سمت کامپوننت Input استفاده کنیم.

آبجکت تنظیمات عناصر Form

کد زیر را به تگ Well اضافه کنیم:

در این کد، ما داریم بر روی تمام object های (تنظیمات input) درون formElementsArray حلقه میزنیم و کامپوننت Input را به همراه تمام ویژگیهای ضروری آن و event های مورد نیازش برمیگردانیم. اینجا یک تابع handleChangeEvent وجود دارد و ما قصد داریم این تابع را برای فعال کردن validation و bind کردن دوطرفه ایجاد کنیم. اما بعدا در مورد آن بیشتر توضیح خواهیم داد.

برای دیدن نتیجه اقدامات فعلی، فایل App.js را با اضافه کردن یک route دیگر به کامپوننت CreateOwner زیر OwnerDetails route اصلاح میکنیم. ما همچنین عبارت import را نیز نباید اینجا فراموش کنیم:

حالا اگر به صفحه CreateOwner برویم، نتیجه زیر را میبینیم:

ایجاد فیلدهای form input

بسیار عالی.

ما control های خود را ایجاد کردیم، اما هنوز نمیتوانیم کاری با آنها انجام دهیم. اما به زودی تابع handleChangeEvent را پیاده سازی میکنیم. ما در این تابع قادر خواهیم بود input های خود را اصلاح و validate نماییم.

تکمیل CreateOwner View

اجازه دهید دکمه ها را برای تکمیل قسمت view به component خود اضافه کنیم.

داخل تگ Form و زیر تگ <br>، این کد را اضافه کنید:

ما اینجا دو دکمه اضافه کردیم و تا زمانی که form نامعتبر باشد، دکمه Create غیرفعال خواهد بود.

عالی.

حالا form ما به شکل زیر میباشد:

form تکمیل شده Create در React

همه چیز طبق انتظار کار می کند.

نتیجه گیری

با خواندن این پست، شما یاد گرفتید:

  • نحوه استفاده از عناصر Bootstrap modal برای ایجاد component های پنجره modal به صورت reusable
  • استفاده از object ساده تنظیمات برای ایجاد form و نحوه انتقال آن به آرایه ای از object ها
  • نحوه انتقال آرایه configuration با استفاده از یک کد ساده JSX به یک Form View

بابت خواندن این مقاله از شما تشکر میکنیم و امیدواریم که برای شما مفید واقع قرار گرفته باشد.

در قسمت بعدی این سری آموزشی، قصد داریم نحوه اعتبارسنجی عناصر input خود را یاد بگیریم. علاوه بر این، قصد داریم از CreateComponent  برای ارسال یک درخواست POST به سمت سرور NET Core Web API. خود استفاده کنیم.

نویسنده

امید عباسی
من امید عباسی هستم. سالهاست که در زمینه برنامه نویسی با تکنولوژی دات نت فعالیت میکنم و عاشق این هستم که تجربیات و دانش خودم را در این زمینه با دیگران به اشتراک بزارم. خیلی دوست دارم که نظر و انتقاد خودتون رو در مورد این نوشته برای من بنویسید تا بتونم در آینده، مطالب بهتر و ارزشمندتری را برای شما فراهم کنم. در صورت داشتن هرگونه سوال هم در قسمت دیدگاه ها میتونید با بنده در ارتباط باشید