В React поля ввода обычно делают управляемыми: их значение хранится в состоянии, а не в самом DOM. Поле показывает значение из состояния и обновляет его при вводе:
function Form() { const [name, setName] = useState(""); return ( <form onSubmit={(e) => { e.preventDefault(); alert(name); }}> <input value={name} onChange={(e) => setName(e.target.value)} /> <button>Отправить</button> </form> ); }
Связка такая: value={name} показывает текущее состояние, а onChange при каждом нажатии клавиши кладёт новое значение в состояние через setName(e.target.value). Так состояние всегда отражает то, что в поле.
e.preventDefault() в onSubmit отменяет перезагрузку страницы — стандартное поведение формы. Управляемые поля позволяют легко проверять ввод, очищать форму и реагировать на изменения.