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

جزء من قسم الأساسيات في رحلة 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>