ReactJS - Программирование форм

Привет,野心勃勃的程序设计师们! Сегодня мы окунёмся в увлекательный мир программирования форм в ReactJS. Как ваш добросердечный сосед по компьютерным наукам, я здесь, чтобы провести вас через это путешествие шаг за шагом. Так что возьмите кружку кофе (или ваш любимый напиток) и начнём!

Что такое формы в ReactJS?

Прежде чем мы перейдём к коду, давайте поймём, что такое формы и почему они важны. Формы resemble стражами входных данных пользователей в веб-приложениях. Они позволяют пользователям взаимодействовать с нашим приложением, предоставляя информацию, которую мы можем обработать и использовать. В React формы немного особенные,因为他们 поддерживают своё состояние. Это означает, что нам нужно обрабатывать их немного differently, чем другие элементы.

Основы обработки форм

Давайте начнём с простого примера формы:

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert('Было отправлено имя: ' + name);
}

return (
<form onSubmit={handleSubmit}>
<label>
Имя:
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</label>
<input type="submit" value="Отправить" />
</form>
);
}

Разберём это:

1. Мы импортируем useState из React для управления нашим состоянием формы.
2. Мы создаем переменную состояния name и функцию setName для её обновления.
3. Функция handleSubmit предотвращает стандартное поведение отправки формы и показывает alert с отправленным именем.
4. В форме мы устанавливаем value input'а в наше состояние name и используем onChange для обновления состояния при изменении input'а.

Это ядро обработки форм в React. Мы контролируем состояние формы с помощью React, поэтому мы называем это "контролируемым компонентом".

Обработка нескольких input'ов

А что, если у нас несколько input'ов? Нам нужно создавать отдельное состояние для каждого? Необязательно! Давайте посмотрим на более сложную форму:

import React, { useState } from 'react';

function MultipleInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

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

const handleSubmit = (event) => {
event.preventDefault();
console.log('Форма отправлена:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="Имя"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Фамилия"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Электронная почта"
/>
<button type="submit">Отправить</button>
</form>
);
}

В этом примере мы используем один объект состояния для управления всеми нашими полями формы. Функция handleChange использует атрибут name input'а для обновления соответствующего поля в нашем состоянии. Этот подход хорошо масштабируется по мере роста ваших форм.

Обработка различных типов input'ов

Формы не только о текстовых input'ах. Давайте посмотрим, как мы можем обрабатывать различные типы input'ов:

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('Форма отправлена:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Имя"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Возраст"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">Выберите пол</option>
<option value="male">Мужской</option>
<option value="female">Женский</option>
<option value="other">Другой</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
Вы студент?
</label>
<fieldset>
<legend>Любимый цвет</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
Красный
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
Синий
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
Зелёный
</label>
</fieldset>
<button type="submit">Отправить</button>
</form>
);
}

Эта форма демонстрирует обработку различных типов input'ов: текст, номер, select, checkbox и radio buttons. Ключевая вещь в функции handleChange, которая проверяет тип input'а и обновляет состояние соответственно.

Валидация форм

Ни одна форма не считается полной без валидации. Давайте добавим базовую валидацию к нашей форме:

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: ''
});

const [errors, setErrors] = useState({});

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

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = 'Имя пользователя обязательно';
if (!formData.email) {
newErrors.email = 'Электронная почта обязательна';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'Электронная почта недействительна';
}
if (!formData.password) {
newErrors.password = 'Пароль обязателен';
} else if (formData.password.length < 6) {
newErrors.password = 'Пароль должен быть не менее 6 символов';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('Форма отправлена:', formData);
// Здесь вы обычно отправляете данные на сервер
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Имя пользователя"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Электронная почта"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Пароль"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">Отправить</button>
</form>
);
}

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

Заключение

И вот мы и добрались до этого! Мы рассмотрели основы обработки форм в React, от простых текстовых input'ов до более сложных форм с различными типами input'ов и валидацией. Помните, что практика делает perfect. Попробуйте создать свои own formas, экспериментируйте с различными типами input'ов и не бойтесь犯错 - это как мы учимся!

Вот quick reference таблица методов, которые мы использовали:

Метод	Цель
useState	Для создания и управления состоянием в функциональных компонентах
onChange	Для обработки изменений в input'ах формы
onSubmit	Для обработки отправки формы
preventDefault	Для предотвращения стандартного поведения отправки формы

Счастливого кодирования и пусть ваши формы всегда будут удобными для пользователей и без багов!

Credits: Image by storyset