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>