React Modal: آموزش گام به گام حتی مادربزرگ شما هم می تواند دنبال کند! ;)

سلام، دوستان علاقه مند به React! امروز می خواهم گام به گام نحوه استفاده از مدال در React را انجام دهم. نترسید، زیرا من شما را در هر مرحله با چنان وضوحی راهنمایی می کنم که حتی مادربزرگ عزیز شما (یا مادر…) می گوید: “من می توانم آن را رمزگذاری کنم!” بنابراین، برای «چگونگی» نمایش و پنهان کردن مدال ها، مدیریت فرم ارسالی، همراه باشید. آماده؟ بیایید به دنیای (برای من: گاهی اوقات هنوز گیج کننده) مدال های React شیرجه بزنیم!

• مرحله 1: ابتدا می خواهیم یک React Project راه اندازی کنیم. با فرض اینکه شما در حال حاضر در یکی از آنها کار می کنید، به قسمت بعدی می پردازم

• مرحله 2: وابستگی هایی وجود دارد که باید وارد کنیم.
  پروژه ما به آن وابسته است و بدون آن کار نخواهد کرد. به مادربزرگتان بگویید مثل این است که بخواهید یک کیک بدون آرد بپزید…

ما موارد خاصی را در بالای صفحه خود وارد خواهیم کرد. (React، قلاب “useState” و سایر وابستگی هایی که ممکن است به آن نیاز داشته باشید
(مثل این است که همه مواد خود را جمع آوری کنید، به طوری که آنها را برای زمانی که به آنها نیاز دارید آماده کنید)

–مرحله 3: اجازه دهید جزء خود را تعریف کنیم، در این مورد آن را “formComponent” می نامیم

• مرحله 4: تنظیم وضعیت ما.
  ما از state برای پیگیری مقادیری که در فیلدهای فرم وارد می شوند استفاده می کنیم. مانند داشتن یک دستیار هوشمند است که ورودی کاربر را تا زمانی که ما به آن نیاز داشته باشیم به خاطر بسپارد. با قلاب useState، یک متغیر حالت به نام values ​​برای ذخیره مقادیر فرم و یک تابع به نام setValues ​​برای به روز رسانی آن حالت ایجاد می کنیم. این به ما کمک می کند تا برنامه خود را تعاملی تر و پاسخگوتر کنیم. مقادیر ورودی که من استفاده می کنم، می توانید آنها را به مقادیری که در فرم خود استفاده خواهید کرد تغییر دهید.

• مرحله 5: مدیریت تغییر در فیلدهای ورودی ما
  هر زمان که یک کاراکتر در فیلدهای ورودی خود اضافه می کنیم، باید مطمئن شویم که در useState ما به روز می شود. به همین دلیل است که ما یک تابع برای مدیریت این تغییر ایجاد می کنیم و آن را بر اساس آن در useState ذخیره می کنیم.

• مرحله 6: رسیدگی به ارسال فرم
  بنابراین، هر زمان که فرم را کامل پر کردیم، باید آن را در جایی به پشت بفرستیم تا پردازش و مراقبت شود.
  (مادربزرگ: به نوشتن نامه فکر کنید، آن را در صندوق پست بگذارید و اجازه دهید پستچی بیشتر از آن مراقبت کند.

• مرحله 7 (تقریباً آنجا): نمایش و پنهان کردن Modal
  نکته ای که در مورد مدال وجود دارد این است که بدون نیاز به ایجاد یک صفحه کاملا جدید فقط برای یک فرم، درخشش بیشتری را در پروژه خود به شما می دهد. شما آن را باز می کنید، بقیه صفحه را در پس زمینه می بینید، اما تمرکز روی Modal است. در لایه ها به آن فکر کنید، وقتی که باز می شود، مودال شما لایه بالایی خواهد بود و پس زمینه لایه زیرین خواهد بود.

بنابراین ابتدا با ساخت 2 تابع، یکی برای باز کردن و دیگری برای بستن آن شروع می کنیم.

• مرحله 8: رندر کردن کامپوننت
  اگر بخواهیم mdoal را ببینیم باید آن را رندر کنیم تا کاربر بتواند آن را ببیند و با آن تعامل داشته باشد.

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

در این مثال من یک علامت ‘+’ را به عنوان یک دکمه برای باز کردن مدال می بینم. ما یک رویداد ‘onClick’ اضافه می کنیم که عملکرد ‘showModal’ را فعال می کند.
توجه داشته باشید “modal hidden” برای استایل دادن به مودال است. وقتی “پنهان” است، نمی توانیم آن را ببینیم. وقتی دکمه “+” را فشار می دهیم، نام کلاس “modal” خواهد بود.

• مرحله 9 (صبور باشید، 3 مورد دیگر باقی مانده است): اجرای محتوای مودال، پس از باز شدن
  شما می توانید ورودی من را با ورودی مورد نیاز در صفحه خود تغییر دهید. این مرحله به این صورت است که محتوا را در مدال های خود قرار می دهیم تا به کاربر نمایش داده شود.

• مرحله 10: بیایید فیلدهای ورودی فرم خود را اضافه کنیم!

می‌توانید فرم‌های ورودی فرم را به هر چیزی که نیاز دارید در ما استفاده کنید تغییر دهید، این فقط نمونه‌ای از مواردی است که می‌توانید استفاده کنید.
توجه داشته باشید که ما تابعی را که در بالا ایجاد کردیم “handlesubmit” می نامیم تا وقتی دکمه ای را که می خواهیم اضافه کنیم باید انجام شود، انجام شود!

• مرحله 11: مرحله نهایی! بیایید دکمه جادویی خود را اضافه کنیم که همه چیز را بدون نیاز به کد دیگری کنترل می کند….. فقط شوخی می کنم، اگر در قسمت پشتی به همین سادگی بود…

et voila، مودال آماده استفاده است. شما می توانید مدال را هر طور که می خواهید استایل کنید. من از یک پوشش استفاده کردم که لایه زیر را تار کرد.
در زیر اسکرین شات هایی از نحوه ظاهر مودال من در پروژه ای که از مدال ها در آن استفاده کردم قرار داده ام.

با تشکر از شما برای خواندن!
مادربزرگ، تمام تلاشم را کردم که آن را توضیح دهم. قول می دهم… اما گاهی نصف کاری که انجام می دهم را هم نمی گیرم

با احترام،
جیتسکه د هردت