Eingabe spiegeln

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 29 von 42.

Sobald der Eingabetext im State gespeichert ist, erfordert das Anzeigen an beliebiger Stelle nur geschweifte Klammern. Eine Begrüßung, die dem Textfeld folgt, während Sie tippen:

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

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

Der Ternär-Operator behandelt das leere Feld mit einer freundlichen Aufforderung statt eines unangenehmen Hello, !. Dieses Muster aus Eingabe und Live-Ausgabe findet sich in Suchfeldern, Anmeldeformularen und Editoren überall wieder.

Aufgabe

Einfach

Erstelle eine Live-Begrüßung.

Füge den State name hinzu, der als leerer String beginnt, und mache die Eingabe (id="name") gesteuert (controlled): value + onChange.
Der Absatz (id="echo") zeigt Type your name, während das Feld leer ist, und ansonsten Hello, ...! mit dem eingegebenen Namen (z. B. Eingabe von Ada → Hello, Ada!).

Probier es selbst

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