Löschen-Button

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

Hier ist die Superkraft von Controlled Inputs: Da der State den Text besitzt, kann dein Code das Feld ändern, nicht nur der Benutzer. Setze es von überall aus zurück:

<button onClick={() => setName('')}>Clear</button>

Setze den Zustand auf eine leere Zeichenkette, und das Feld leert sich beim nächsten Rendern selbst, weil value={name} immer den Zustand anzeigt. Bei einem unkontrollierten Eingabefeld müsstest du von Hand auf das DOM zugreifen; mit Zustand genügt ein Aufruf des Setters.

Aufgabe

Mittel

Vervollständige den Nachrichten-Editor.

Steuere das Eingabefeld (id="message") mit dem Zustand message.
Zeige den Entwurf im Absatz (id="draft") an: den Text Draft: , gefolgt von der Nachricht.
Die Schaltfläche id="clear" leert die Nachricht.

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>