onSubmit

Событие onSubmit срабатывает, когда пользователь отправляет форму — например, нажимает кнопку с type="submit" или вводит Enter в поле внутри формы.

Использование

Обработчик onSubmit привязывается к элементу <form>:

function Form() {
  function handleSubmit(event) {
    event.preventDefault(); // предотвращает перезагрузку страницы
    console.log('Форма отправлена');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Без вызова event.preventDefault() браузер выполнит стандартное действие — отправит форму и перезагрузит страницу, что в React-приложениях почти всегда нежелательно.

Получение данных формы

В управляемых компонентах данные обычно берутся из состояния:

function Form() {
  const [username, setUsername] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log('Имя пользователя:', username);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

В неконтролируемых формах можно использовать ref для доступа к значениям напрямую.

Важные особенности

Кнопка внутри формы по умолчанию имеет type="submit", если не указано иное. Чтобы избежать случайной отправки, явно указывайте type="button" для обычных кнопок.
Событие onSubmit всплывает, но его можно остановить с помощью event.stopPropagation(), если нужно изолировать обработку.
Отправка формы возможна не только через кнопку: нажатие Enter в текстовом поле также вызывает onSubmit.

Событие onSubmit — центральный механизм обработки пользовательского ввода в формах и основа для валидации, отправки данных на сервер и управления состоянием приложения.