---
title: Формы
questionDates:
  q-transfer-0463: '2026-10-01'
seo:
  description: >-
    Тема «Формы» для собеседования React Developer. Как создать форму в React?
    Как обрабатывать формы в React?
  title: Формы — React Developer
---

[Все темы React Developer](/prep/react-developer)

## <strong>Как создать форму в React?</strong> [#q-14bee738d69b81a98447e0c1ae3b5de0]

Для создания формы в React нужно использовать JSX для описания HTML-структуры формы и управлять состоянием через <code>useState</code> или <code>this&#46;state</code> (для классовых компонентов).

#### Пример с функциональным компонентом&#58;

```jsx
import React, { useState } from "react";

const MyForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Submitted:", { name, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;
```

#### Пример с классовым компонентом&#58;

```jsx
import React, { Component } from "react";

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "", email: "" };
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log("Submitted:", this.state);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="name"
            value={this.state.name}
            onChange={this.handleChange}
          />
        </label>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={this.state.email}
            onChange={this.handleChange}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default MyForm;
```

Для создания формы в React используйте JSX для разметки и управляйте состоянием формы с помощью <code>useState</code> для функциональных компонентов или <code>this&#46;state</code> для классовых компонентов.

:::note[Ссылки для изучения]

1. [Формы React: input, состояние, onChange и defaultValue](https://reactdev.ru/reference/react-dom/components/input/)
2. [Создание формы в React. Ulbi TV, с 41:53](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=2513s)

:::

---

## <strong>Как обрабатывать формы в React?</strong> [#q-14bee738d69b81188da2f5706d785771]

Для обработки форм в React необходимо управлять состоянием вводимых данных и обработкой событий.

#### Шаги&#58;

{/* prettier-ignore */}
1. <strong>Создание состояния</strong>&#58;

    - Используйте <code>useState</code> в функциональных компонентах или <code>this&#46;state</code> в классовых компонентах для хранения значений полей формы.

1. <strong>Обработка изменения полей</strong>&#58;

    - Добавьте обработчики событий <code>onChange</code> для обновления состояния при изменении значений в полях формы.

1. <strong>Обработка отправки формы</strong>&#58;

    - Добавьте обработчик события <code>onSubmit</code> для обработки данных формы при отправке.

#### Пример с функциональным компонентом&#58;

```jsx
import React, { useState } from "react";

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Form submitted:", formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;
```

Для обработки форм в React используйте состояние для хранения данных формы, добавляйте обработчики <code>onChange</code> для обновления состояния и <code>onSubmit</code> для обработки данных при отправке формы.

:::note[Ссылки для изучения]

1. [Формы React: input, состояние, onChange и defaultValue](https://reactdev.ru/reference/react-dom/components/input/)
   :::

---

## Как хранить состояние многошаговой формы? [#q-transfer-0463]

Данные шагов держат в одном источнике истины над маршрутизируемыми экранами: reducer, form store или родительском состоянии. Каждый шаг валидирует свои поля для перехода, но финальная отправка повторно проверяет общую схему и межшаговые правила. При возврате значения сохраняются; при refresh черновик можно версионированно сохранять локально или на сервере с учётом чувствительности данных. Навигация не должна отправлять частичный заказ случайно. Сервер всё равно валидирует итог и защищает повторную отправку идемпотентностью. Состояние UI шага отделяют от бизнес-данных формы, чтобы переходы не стирали введённое.

:::note[Ссылки для изучения]

1. [Состояние пошаговой формы React в общем родительском компоненте](https://metanit.com/web/react/7.1.php)
   :::