День 5: Формы и отправка форм с функциональными компонентами:

В предыдущих статьях мы рассмотрели различные аспекты React, такие как настройка среды разработки, работа с JSX и компонентами, обработка событий и побочных эффектов, а также маршрутизация. В этой статье мы углубимся в тему форм в React, создав формы и обработав отправку форм с помощью функциональных компонентов.

Функциональные компоненты — это способ определить компоненты React как функции JavaScript. Они просты, их легко понять и протестировать, и они занимают меньше места по сравнению с классовыми компонентами. В этой статье мы будем использовать функциональные компоненты для создания и отправки форм в React.

Создание форм

Создавать формы в React с помощью функциональных компонентов легко и просто. В следующем примере мы создадим простую форму, которая принимает имя пользователя и адрес электронной почты.

import React, { useState } from 'react';

const MyForm = () => {
    // Use the useState hook to define form data as state
    const [formData, setFormData] = useState({
        name: '',
        email: ''
    });

    // Function to handle form submission
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(formData);
    }

       // Function to handle input changes
    const handleChange = (event) => {
        setFormData({
            ...formData,
            [event.target.name]: event.target.value
        });
    }

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

В этом примере мы сначала импортируем React и хук useState из библиотеки React. Хук useState позволяет нам определять и управлять состоянием функциональных компонентов. Мы используем его для определения переменной состояния formData, которая содержит данные для нашей формы.

Функция handleSubmit используется для обработки отправки формы. Он передается как реквизит onSubmit элементу form. Функция сначала предотвращает поведение формы по умолчанию, которое может привести к обновлению страницы. Затем он записывает данные формы в консоль.

Функция handleChange используется для обработки изменений ввода. Он передается как реквизит onChange элементам input. Функция обновляет соответствующее свойство переменной состояния formData новым входным значением.

Наконец, мы визуализируем форму с input элементами для полей имени и электронной почты и кнопкой отправки. Свойство value элементов input устанавливается на соответствующее свойство переменной состояния formData, что позволяет полям ввода отображать текущие данные и обновлять их, когда пользователь что-то вводит.

Стоит отметить, что вы можете использовать такие библиотеки, как formik и redux-form, для обработки форм, проверки ввода и обработки ошибок.

_beGREAT