Bouton d'effacement

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 31 sur 42.

Voici le superpouvoir de l'input contrôlé : comme l'état possède le texte, votre code peut modifier la zone de texte, pas seulement l'utilisateur. Réinitialisez-la de n'importe où :

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

Définissez l'état sur une chaîne vide et la zone de texte se vide d'elle-même lors du prochain render, car value={name} affiche toujours l'état. Avec un input non contrôlé, vous devriez manipuler le dom à la main ; avec l'état, c'est un seul appel au setter.

Défi

Moyen

Terminez le compositeur de message.

Rendez l'élément input (id="message") contrôlé avec l'état message.
Affichez le brouillon dans le paragraphe (id="draft") : le texte Draft: suivi du message.
Le bouton id="clear" vide le message.

Essayez vous-même

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