زر المسح
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 31 من 42.
إليك القوة الخارقة للإدخال المحكوم (controlled-input): بما أن الحالة (state) هي من تملك النص، فإن كودك يمكنه تغيير الصندوق، وليس فقط المستخدم. قم بـ Reset له من أي مكان:
<button onClick={() => setName('')}>Clear</button>قم بضبط الحالة على سلسلة نصية فارغة وستتفرغ خانة الإدخال بنفسها عند العرض (render) التالي، لأن value={name} يعرض الحالة دائماً. مع الإدخال غير الموجه (uncontrolled input) ستضطر للوصول إلى الـ dom يدوياً؛ أما مع الحالة فكل ما تحتاجه هو استدعاء دالة تعيين واحدة.
التحدي
متوسطأكمل مُنشئ الرسائل.
- اجعل الإدخال (
id="message") محكومًا بحالةmessage. - اعرض المسودة في الفقرة (
id="draft"): النصDraft:متبوعًا بالرسالة. - زر
id="clear"يقوم بتفريغ الرسالة.
جرّب بنفسك
<!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: تبديل المتابعة