---
title: Формы
seo:
  title: Формы — React Developer
  description: Тема «Формы» для собеседования React Developer. Как создать форму в React? Как обрабатывать формы в React?
---

[Все темы React Developer](/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](https://reactdev.ru/archive/react16/forms/)
   :::

---

## <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](https://reactdev.ru/archive/react16/forms/)
   :::