הצגת הקלט

חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 29 מתוך 42.

ברגע שטקסט הקלט נמצא במצב, הצגתו בכל מקום היא רק עניין של סוגריים מסולסלים. ברכה שמתעדכנת בהתאם לתוכן התיבה בזמן ההקלדה:

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

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

האופרטור הטרנרי מטפל בתיבה הריקה באמצעות הנחיה ידידותית במקום Hello, ! מביך. התבנית הזו של קלט ופלט חי נמצאת בכל מקום: בתיבות חיפוש, בטופסי הרשמה ובעורכים.

אתגר

קל

בנו ברכה שמתעדכנת בזמן אמת.

הוסיפו מצב name שמתחיל כמחרוזת ריקה, והפכו את שדה הקלט (id="name") לנשלט: 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>