Отправка формы

До сих пор поля только показывали набранное. Чтобы забронировать билеты, пользователь отправляет форму. Как и в курсе JavaScript, поля кладут в form с кнопкой отправки, а в React форме дают onSubmit:

import { useState } from "react";

export default function App() {
    const [email, setEmail] = useState("");
    const [signedUp, setSignedUp] = useState(false);

    function handleSubmit(event) {
        event.preventDefault();
        setSignedUp(true);
    }

    return (
        <main>
            <form onSubmit={handleSubmit}>
                <label htmlFor="email">Почта</label>
                <input
                    id="email"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                />
                <button type="submit">Подписаться</button>
            </form>
            {signedUp && <p>Спасибо! Мы напишем на {email}.</p>}
        </main>
    );
}

React вызывает onSubmit, когда форму отправляют кнопкой или клавишей Enter в одном из её полей. И, как в курсе JavaScript, после этого браузер выполняет действие по умолчанию: отправляет поля на сервер и загружает страницу заново. Для приложения на React это значит начать с нуля, и всё состояние возвращается к начальному. Прежде чем начать, попробуйте это в предпросмотре упражнения: введите имя и нажмите «Забронировать». Страница загрузится заново, и поле окажется пустым. event.preventDefault() останавливает браузер, поэтому вызывайте его в обработчике первым.

Обработчику не нужно читать поля: набранное уже лежит в состоянии, здесь это email. Он только решает, что произойдёт, а здесь он запоминает в состоянии, что пользователь подписался.

Форма, которая сделала своё дело, часто уступает место сообщению. Это умеет делать ранний return из урока «Списки и условия»: если перед return с формой написать if (signedUp), компонент вернёт только сообщение, а форма вообще не будет отрисована.

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

• event.preventDefault; без скобок не вызывает метод, поэтому страница загружается заново.