Kontrolowane pola wejściowe

Pola tekstowe rodzą pytanie: użytkownik wpisuje tekst w polu, ale Twój komponent ma stan: kto jest właścicielem tekstu? W React odpowiedź brzmi: stan jest jego właścicielem. To się nazywa kontrolowanym polem wejściowym:

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

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

Dwa połączenia tworzą pętlę:

• value={name}: pole zawsze wyświetla stan
• onChange: każde naciśnięcie klawisza wywołuje funkcję ustawiającą wartość za pomocą e.target.value, czyli bieżącego tekstu w polu

Wpisywanie aktualizuje więc stan, stan powoduje ponowne renderowanie, a pole wyświetla nowy stan. Korzyść: tekst znajduje się w zmiennej, którą możesz sprawdzać, przekształcać, czyścić lub wyświetlać w dowolnym innym miejscu na stronie.