Pulsante Cancella
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 31 di 42.
Ecco il superpotere degli input controllati: poiché lo stato gestisce il testo, il tuo codice può modificare il campo, non solo l’utente. Reimpostalo da qualsiasi punto:
<button onClick={() => setName('')}>Clear</button>Imposta lo stato su una stringa vuota e il campo si svuota da solo al rendering successivo, perché value={name} visualizza sempre lo stato. Con un input non controllato dovresti intervenire manualmente sul DOM; con lo stato basta una chiamata al setter.
Sfida
MedioCompleta il compositore di messaggi.
- Rendi l'input (
id="message") controllato con lo statomessage. - Mostra la bozza nel paragrafo (
id="draft"): il testoDraft:seguito dal messaggio. - Il pulsante
id="clear"svuota il messaggio.
Provalo tu
<!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>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX