ملخص: الحالة والأحداث
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 27 من 42.
التحدي
متوسطملخص الفصل. قم ببناء لوحة تحكم لمصباح مكتب: عداد ومفتاح تبديل يعيشان جنبًا إلى جنب في مكون واحد.
- أضف حالتين مستقلتين:
brightnessتبدأ بـ0وonتبدأ بـfalse. - اعرض مستوى السطوع في السبان مع
id="level". الزر الذي يحملid="brighter"يضيف 1 عند كل نقرة. - الزر الذي يحمل
id="power"يقوم بقلب حالةon. عندما تكون قيد التشغيل، قم بإظهار<p>معid="status"والنصLamp is on؛ وخلاف ذلك قم بـrenderلـnull.
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>جميع دروس الأساسيات
2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة