Input controllati

I campi di testo pongono una domanda: l’utente scrive nella casella, ma il tuo componente ha uno stato: chi è proprietario del testo? In React la risposta è: è lo stato a esserne proprietario. Questo si chiama input controllato:

const [name, setName] = useState('');

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Due fili formano il ciclo:

• value={name}: la casella visualizza sempre lo stato
• onChange: ogni pressione di un tasto chiama il setter con e.target.value, il testo corrente della casella

Quindi, mentre digiti, lo stato si aggiorna, lo stato viene visualizzato di nuovo e il riquadro mostra il nuovo stato. Il vantaggio: il testo è contenuto in una variabile che puoi convalidare, trasformare, cancellare o visualizzare altrove nella pagina.