Contatore di caratteri
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 30 di 42.
Poiché il testo è uno stato, puoi calcolare con esso a ogni rendering. I contatori di caratteri in stile tweet si ottengono con una sola riga:
<p>{message.length} characters</p>Non serve uno stato aggiuntivo: message.length deriva dallo stato esistente e viene ricalcolato automaticamente a ogni pressione di un tasto. Regola pratica: se puoi calcolarlo dallo stato che hai già, non memorizzarlo nello stato.
Sfida
FacileCrea una casella per la biografia con un contatore della lunghezza aggiornato in tempo reale.
- Rendi l’input (
id="bio") controllato con lo statobio(inizialmente vuoto). - Il paragrafo (
id="length") mostraN characters, dove N è la lunghezza attuale della biografia (calcolata, non memorizzata).
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 JSX3Componenti
Mattoni di baseIl tuo secondo componenteRiutilizzare i componentiComporre una paginaRiepilogo: componenti6Moduli e input
Input controllatiVisualizzare l’inputContatore di caratteriPulsante CancellaRipasso: moduli e input