تكرار المدخلات

جزء من قسم الأساسيات في رحلة React على Coddy. الدرس 29 من 42.

بمجرد أن ينص العبارة النصية في الحالة (state)، فإن عرضها في أي مكان يتطلب فقط أقواسًا زوايا. تحية تتبع الصندوق أثناء الكتابة:

const [name, setName] = useState('');

<input value={name} onChange={(e) => setName(e.target.value)} />
<p>{name === '' ? 'Type your name' : 'Hello, ' + name + '!'}</p>

يتعامل العامل الشرطي الثلاثي (ternary) مع الصندوق الفارغ برسالة توضيحية ودودة بدلاً من التعامل مع عبارة Hello, ! المحرجة. نمط المدخلات مع المخرجات المباشرة (input-plus-live-output) هذا مستخدم في مربعات البحث ونماذج التسجيل والمحررات في كل مكان.

التحدي

سهل

قم ببناء تحية مباشرة.

أضف حالة name تبدأ كسلسلة نصية فارغة واجعل حقل الإدخال (id="name") محكومًا (controlled): value + onChange.
تظهر الفقرة (id="echo") النص Type your name عندما يكون الصندوق فارغًا، وتظهر Hello, ...! مع الاسم المكتوب بخلاف ذلك (على سبيل المثال عند كتابة Ada ← Hello, Ada!).

جرّب بنفسك

<!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>