أصبحت تطبيقات الويب المنبثقة شائعة بشكل متزايد ، لأنها تسمح بالتفاعل التفاعلي مع المستخدم ، مما يمنحه ميزات إضافية وسهولة الاستخدام. يمكن أن تحتوي النوافذ المنبثقة على عناصر واجهة مختلفة مثل النماذج والإشعارات ومربعات الحوار والمزيد.
رد فعل هي واحدة من المكتبات الأكثر شعبية لتطوير تطبيقات الويب ، والذي يسمح لك لإنشاء مكونات قابلة لإعادة الاستخدام باستخدام تكوين. في هذا الدليل ، وسوف ننظر في كيفية جعل نافذة منبثقة في رد فعل باستخدام المفاهيم والميزات الأساسية.
قبل البدء في إنشاء نافذة منبثقة ، من المهم فهم المبادئ الأساسية للعمل مع المكونات في رد فعل. المكونات هي اللبنات الأساسية لتطبيقات الويب ، كل منها يمكن أن يكون له منطقه وحالته الخاصة. ستكون النافذة المنبثقة أيضا مكونا منفصلا يمكن استخدامه في أجزاء أخرى من التطبيق.
لإنشاء نافذة منبثقة ، سنحتاج إلى الأدوات والممارسات التالية:
- تفاعل المكونات لعرض نافذة منبثقة ومحتوياتها
- حالة المكون للتحكم في فتح وإغلاق النافذة
- معالجات الأحداث للرد على إجراءات المستخدم
- إدارة النمط باستخدام فئات كس والأنماط المضمنة
- الرسوم المتحركة باستخدام كس أو مكتبات إضافية
- رد فعل: إنشاء نافذة منبثقة
- دليل لإنشاء نافذة منبثقة في رد فعل للمبتدئين
- سؤال وجواب
- كيف يمكنني إنشاء نافذة منبثقة في رد فعل?
- كيف يتم عرض النافذة المنبثقة في رد الفعل فوق العناصر الأخرى?
- كيفية التعامل مع الأحداث المنبثقة في رد فعل?
- كيفية تحريك نافذة منبثقة في رد فعل?
رد الفعل: إنشاء نافذة منبثقة
في رد الفعل ، النوافذ المنبثقة ، والمعروفة أيضا باسم النوافذ المنبثقة ، هي أحد العناصر المهمة لواجهة المستخدم. يتم استخدامها عادة لعرض معلومات إضافية أو تحذيرات أو لتنفيذ إجراءات مثل تأكيد حذف عنصر ما.
يمكن أن يكون إنشاء نافذة منبثقة في رد الفعل مهمة بسيطة إلى حد ما. للبدء ، سوف تحتاج إلى:
- مكون التبديل الذي سيعرض أو يخفي النافذة المنبثقة;
- مكون النافذة المنبثقة الذي سيتم عرضه أو إخفاؤه عند النقر فوق مكون التبديل.
نهج واحد لإنشاء نافذة منبثقة في رد فعل هو استخدام الحالة المحلية للمكونات.
مثال على الكود:
{`
استيراد رد فعل ، { أوسيستات } من 'رد فعل';
وظيفة المنبثقة () {
كونست [إيسوبين ، سيتيسوبين] = أوسيستات (كاذبة);
كونست توجليبوبوب = () = > {
سيتيسوبين (!إيزوبين);
}
عودة (
افتح نافذة منبثقة
{إيزوبين & & (
هذه نافذة منبثقة
قد يكون هناك بعض المعلومات أو المحتوى الإضافي هنا.
لإغلاق
)}
);
}
تصدير المنبثقة الافتراضية;
`}
في هذا المثال ، نستخدم ربط أوسيستات لإنشاء حالة إيسوبين المحلية التي تحدد ما إذا كانت المنبثقة مفتوحة أم لا. عند النقر على زر" فتح نافذة منبثقة " ، يتم استدعاء وظيفة توجليبوبوب ، والذي يغير قيمة إيسوبين إلى العكس. نتيجة لذلك ، تفتح النافذة أو تغلق اعتمادا على القيمة الحالية المفتوحة.
إذا كان إيسوبين صحيحا ، يتم عرض المكون المنبثق ، والذي يحتوي على معلومات أو محتوى إضافي ، بالإضافة إلى زر "إغلاق". عند النقر على زر" إغلاق " ، يتم استدعاء وظيفة توجليبوبوب ، الذي يغير مرة أخرى قيمة إيسوبين ، وإغلاق النافذة المنبثقة.
هذا مثال أساسي ، ويمكنك تخصيصه حسب رغبتك عن طريق إضافة أنماط أو ميزات إضافية. ومع ذلك ، فإنه يوضح المبادئ الأساسية لإنشاء نافذة منبثقة في رد الفعل.
- لا تنس استيراد المكون المنبثق واستخدامه في التطبيق الخاص بك لرؤية النتيجة.
- دليل لإنشاء نافذة منبثقة في رد فعل للمبتدئين
- رد فعل هو مكتبة جافا سكريبت الشعبية التي تسمح لك لتطوير واجهات المستخدم. إذا كنت ترغب في إضافة نافذة منبثقة إلى تطبيق رد الفعل الخاص بك ، فاتبع دليل المبتدئين هذا.
- خطوات إنشاء نافذة منبثقة في رد الفعل:
- قم بإنشاء مكون جديد للنافذة المنبثقة. نسميها ، على سبيل المثال ، المنبثقة.
استخدم خطاف أوسيستات لإنشاء حالة ستكون مسؤولة عن عرض/إخفاء النافذة المنبثقة. استدعاء هذه الحالة ، على سبيل المثال ، هوبوبوبفيسيبل.
استخدام هوك أوسيفكت لإضافة معالج الحدث لإخفاء نافذة منبثقة عند النقر على الخلفية. عندما يتم تحميل المكون المنبثق ، يمكنك إضافة معالج حدث ، وعندما يتم إلغاء تثبيته ، يمكنك حذفه. جنبا إلى جنب مع هوك أوسيفكت ، سوف تحتاج إلى ربط أوسيرف لربط عنصر الخلفية.
في طريقة التقديم للمكون المنبثق ، اعرض النافذة المنبثقة إذا كان إيسبوبوبفيسيبل صحيحا. للقيام بذلك ، سوف تحتاج إلى استخدام عامل التشغيل الشرطي و جسك الترميز.
أضف زرا أو عنصرا سيكون مسؤولا عن عرض/إخفاء النافذة المنبثقة. نسميها ، على سبيل المثال ، تبديلزر. في هذا العنصر ، استخدم وظيفة سيتبوبوبفيسيبل لعكس حالة إيسبوبوبفيسيبل.
هنا هو رمز عينة للمكون المنبثقة:
استيراد رد فعل ، { أوسيستات ، أوسيفيكت ، أوسيريف } من 'رد فعل';
كونست المنبثقة = () = > {
كونست [إيسبوبوبفيسيبل ، سيتبوبوبفيسيبل] = أوسيستات (كاذبة);
كونست بوبوبريف = وسيريف();
تأثير الاستخدام (() = > {
كونست هاندلوتسيدكليك = (الحدث) = > {
إذا (بوبوبريف.تيار&&!بوبوبريف.الحالي.يحتوي على (حدث.الهدف)) {
سيتبوبوبفيسيبل (كاذبة);
}
}
وثيقة.إضافة إيفنتليستينر ('موسدون' ، هاندلوتسيدكليك);
العودة () = > {
وثيقة.ريموفيفينتليستينر ('موسدون' ، مقبض سيدكليك);
}
}, []);
عودة (
سيتبوبوبفيسيبل (!إيسبوبوبفيسيبل)} > تبديل المنبثقة
{إيسبوبوبفيسيبل & & (
Это мое المنبثقة окно!
)}
};
};
يمكنك استخدام هذا الرمز في تطبيق رد الفعل الخاص بك وتخصيص النافذة المنبثقة وفقا لاحتياجاتك وأنماطك.
مبارك! الآن أنت تعرف كيفية إنشاء نافذة منبثقة في رد فعل. حظا سعيدا في التنمية الخاصة بك في رد فعل التنمية!
سؤال وجواب
كيف يمكنني إنشاء نافذة منبثقة في رد فعل?
لإنشاء نافذة منبثقة في رد فعل ، يمكنك استخدام نافذة مشروطة. رد فعل لديها العديد من المكتبات ، على سبيل المثال رد فعل مشروط أو رد فعل التمهيد ، والتي توفر مكونات جاهزة من النوافذ مشروط. يمكنك أيضا إنشاء نافذة مشروطة خاصة بك باستخدام حالة المكون والعرض الشرطي.