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

Формы — это способ, которым пользователь разговаривает с приложением: вводит имя, выбирает билет, ставит флажок. В этом уроке вы шаг за шагом соберёте форму заказа билетов на «Летние звуки».

В курсе JavaScript текст поля хранил сам элемент, а его value вы читали, когда он был нужен. В React текст поля живёт в состоянии, как и всё остальное на странице, что меняется. Поле показывает состояние, а каждая нажатая клавиша его меняет:

import { useState } from "react";

export default function App() {
    const [name, setName] = useState("");

    return (
        <main>
            <label htmlFor="name">Ваше имя</label>
            <input
                id="name"
                value={name}
                onChange={(event) => setName(event.target.value)}
            />
            <p>Здравствуйте, {name}!</p>
        </main>
    );
}

Вот что происходит, когда пользователь вводит A:

1. Поле получает событие, и React вызывает onChange. Про event.target.value вы знаете из урока «События»: это текст в поле, теперь "A".
2. setName("A") меняет состояние, и React снова отрисовывает App.
3. В новой отрисовке name равно "A", поэтому поле показывает A, и приветствие под ним тоже.

Поле, текст которого берётся из состояния, называется управляемым полем: его value — всегда то, что говорит состояние. Это даёт две возможности. Страница может показывать набранное прямо во время набора, и не только в самом поле. А ваш код может менять текст поля: setName("") очищает его, и никакой querySelector не нужен.

Типичная ошибка:

• useState() без начального значения. Тогда поле начинается с undefined, и React считает его неуправляемым, а как только вы начнёте печатать, консоль предупредит: A component is changing an uncontrolled input to be controlled. Состояние текстового поля начинайте с "", то есть с пустой строки.