Управляемые поля ввода

Текстовые поля ввода (`input`) вызывают вопрос: пользователь вводит текст в поле, но у вашего компонента есть состояние (state) — кто же владеет этим текстом? В React ответ такой: состоянием владеет компонент. Это называется управляемым полем ввода (controlled input):

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

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

Две связи замыкают этот цикл:

• value={name}: поле всегда отображает состояние
• onChange: каждое нажатие клавиши вызывает сеттер с e.target.value, текущим текстом в поле

Так ввод текста обновляет состояние, состояние вызывает повторный рендер, и поле ввода показывает новое состояние. Выгода: текст хранится в переменной, которую вы можете валидировать, преобразовывать, очищать или отображать в любом другом месте страницы.