> Как понять, куда данные с формы будут отправлены в React (React)

Короткий ответ

В React данные с формы отправляются туда, куда указывает обработчик события onSubmit на теге <form>. В отличие от vanilla HTML, React не использует атрибут action - вместо этого вы контролируете отправку через JavaScript, вызывая preventDefault() и затем отправляя данные на нужный endpoint через fetch, axios или другую HTTP-библиотеку. Куда именно - зависит от бизнес-логики в обработчике.

Подробное объяснение

В классическом HTML атрибут action на форме задаёт URL, на который браузер отправляет данные при сабмите. В React этот подход не применяется, потому что React - это SPA-фреймворк, где вся коммуникация с сервером происходит асинхронно через JavaScript, без перезагрузки страницы.

В React вы вешаете обработчик onSubmit на элемент <form>. Внутри этого обработчика:

1. Вызываете event.preventDefault() - это отключает стандартное поведение браузера (перезагрузку страницы и отправку на action).
2. Собираете данные формы (из state, refs, или FormData).
3. Отправляете их на нужный URL с помощью fetch, axios, или другого HTTP-клиента.

Куда именно отправляются данные - полностью определяется вашим кодом в обработчике. Это может быть:

• API-эндпоинт на вашем бэкенде
• Внешний сервис
• GraphQL endpoint
• WebSocket
• Локальное хранилище для тестирования

Атрибут action на <form> в React обычно не используется или устанавливается в пустую строку, так как он не имеет смысла при асинхронной отправке.

На практике

В реальных проектах отправка формы обычно выглядит так:

• Данные собираются из controlled components (через useState) или из uncontrolled (через useRef).
• В onSubmit вызывается preventDefault().
• Далее идёт валидация данных на клиенте.
• После успешной валидации - HTTP-запрос к API.
• Обработка ответа: показать успех, ошибку, редирект.

Если используется библиотека для форм (React Hook Form, Formik), она берёт на себя сбор данных и вызов onSubmit с уже подготовленными значениями.

Пример кода

JSX
import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault(); // отключаем стандартную отправку

    const formData = { email, password };

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Login failed');
      }

      const data = await response.json();
      console.log('Успешный вход:', data);
    } catch (error) {
      console.error('Ошибка отправки:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit">Войти</button>
    </form>
  );
}

Как отвечать на собеседовании

Начните с ключевого отличия: в React нет автоматической отправки на action, всё управляется через onSubmit и preventDefault(). Подчеркните, что разработчик сам решает, куда и как отправлять данные - это даёт гибкость, но требует явного указания endpoint в коде. Упомяните, что атрибут action технически можно использовать, но это антипаттерн в React, так как он вызывает перезагрузку страницы. Если спросят про server components или React 19 - можно добавить, что там появились новые возможности для форм, но принцип остаётся тем же.

Что проверяет интервьюер

Интервьюер проверяет:

• Понимание разницы между традиционным HTML-формами и React-подходом.
• Знание event.preventDefault() и его роли.
• Умение объяснить, как работает асинхронная отправка данных в SPA.
• Понимание controlled vs uncontrolled components в контексте форм.
• Осведомлённость о современных практиках (React Hook Form, Formik, server actions).

Типичные ошибки

• Забывают вызвать event.preventDefault(), из-за чего страница перезагружается.
• Пытаются использовать атрибут action на <form> в надежде, что React его обработает - это не работает, браузер всё равно делает полный редирект.
• Путают onSubmit на форме с onClick на кнопке - обработчик должен быть на форме, чтобы корректно обрабатывать сабмит через Enter.
• Не обрабатывают ошибки сети или сервера - отправка считается успешной, даже если запрос упал.
• Используют синхронные запросы (например, через XMLHttpRequest без async/await) - это блокирует UI.