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>

Setzen Sie den State auf einen leeren String und das Eingabefeld leert sich beim nächsten Rendering von selbst, da value={name} immer den State anzeigt. Bei einem ungesteuerten Input müssten Sie manuell auf das DOM zugreifen; mit State ist es ein einziger Setter-Aufruf.

Aufgabe

Mittel

Vervollständige den Message Composer.

Mache das Input-Feld (id="message") mit dem State message gesteuert (controlled).
Zeige den Entwurf im Paragraphen (id="draft") an: den Text Draft: gefolgt von der Nachricht.
Der Button mit der 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>