Формы

Все темы React Developer

Как создать форму в React?

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

Пример с функциональным компонентом:

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;

Пример с классовым компонентом:

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 для разметки и управляйте состоянием формы с помощью useState для функциональных компонентов или this.state для классовых компонентов.

Как обрабатывать формы в React?

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

Шаги:

1. Создание состояния:

   • Используйте useState в функциональных компонентах или this.state в классовых компонентах для хранения значений полей формы.

2. Обработка изменения полей:

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

3. Обработка отправки формы:

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

Пример с функциональным компонентом:

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 используйте состояние для хранения данных формы, добавляйте обработчики onChange для обновления состояния и onSubmit для обработки данных при отправке формы.

Как хранить состояние многошаговой формы?

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