Форми є невід’ємною частиною веб-розробки, особливо коли ваша система вимагає певного введення від користувача. Тому дуже важливо забезпечити найкращий досвід користувача при розробці форм для наших додатків. Ми розглянемо всі аспекти форм і в кінці цієї статті ви зможете створити найкращі форми в React.
Є різні способи збору даних через форми, серед яких інпут-елементи, чекбокси, списки, радіокнопки та інші типи. Для початку розглянемо інпут-елементи. Існує два види інпутів: контрольовані та неконтрольовані.
У чому різниця між ними? Різниця полягає в тому, що неконтрольовані інпути не залежать від стану React і обробляються безпосередньо через DOM (Document Object Model), тому для доступу до значення, яке введено, ми використовуємо refs. Наприклад, якщо ми хочемо додати файл як інпут, це не можна контролювати, оскільки це залежить від браузера, тому це приклад неконтрольованого інпуту, в той час як контрольовані інпути — це ті, де дані форми обробляються через стан компонента. Вони отримують своє поточне значення через props і змінюються за допомогою колбеків, таких як onClick, onChange тощо. Батьківський компонент керує своїм власним станом і передає нові значення як props до контрольованого компонента.
Щоб полегшити обробку форм у React, розробники створили бібліотеку під назвою Formik, яка є невеликою бібліотекою компонентів і хуків для React, що допомагає вам з трьома найбільш набридливими частинами:
a) Отримання значень з форми та передача їх назад у стан.
b) Перевірка та повідомлення про помилки.
c) Обробка відправлення форми.
Formik дуже легко встановити, просто введіть команду:
npm install formik --save
Щоб дізнатися більше про formik та його багатофункціональність, відвідайте https://www.formik.org. Formik можна використовувати разом з бібліотекою під назвою Yup, щоб допомогти вам ефективно обробляти помилки форми та валідацію. Що таке Yup? Yup — це конструктор схем для парсингу та валідації значень під час виконання. Процес є таким же простим, як визначення схеми, перетворення значення на відповідність або перевірка форми існуючого значення або обох. Схеми Yup є дуже виразними і дозволяють моделювати складні, взаємозалежні валідації або перетворення значень. Щоб встановити Yup, введіть команду:
npm install yup --save
Приклад схеми Yup:
let userSchema = object({
name: string().required(),
age: number().required().positive().integer(),
email: string().email(),
website: string().url().nullable(),
createdOn: date().default(() => new Date()),
});
Чекбокс у React дозволяє користувачам вибирати кілька значень у формі. Також він корисний для отримання булевих відповідей від користувачів. Наприклад, кнопка на кшталт Instagram - це тип чекбокса. Коли користувачі ставлять "лайк" на пост, це відображає заповнену іконку; інакше — контурну іконку.
Ось приклад того, як обробляються форми для відправлення:
function handleChange(e) {
setChecked(e.target.checked);
}
Раніше ми обговорювали, як неконтрольовані інпути використовують refs. Тепер перейдемо до useRef і з'ясуємо їх зв'язок. useRef — це хук React, який дозволяє посилатися на значення, яке не потрібно для рендерингу. Його можна використовувати для наступних цілей:
a) Посилання на значення через ref.
c) Запобігання перегенерації вмісту ref.
Цей хук зберігає значення між рендерами, як useState, однак не викликає повторного рендеру, як useState. Найпопулярніше використання цього хука — це адресація до DOM-елементів і вузлів.
Щось подібне до того, що робить querySelector у JavaScript. Нам потрібно передати контейнер разом з ключовим словом «ref». Контейнер є об'єктом з властивістю «current», тому ми можемо використовувати його, щоб отримати точний DOM-елемент. Ще один момент, який слід пам'ятати, це те, що useRef не обмежений лише одним HTML-елементом. Щоб більш детально дізнатися про useRef, ви можете прочитати мою статтю на цю тему за посиланням https://medium.com/@mark.onyango_95482/use-ref-hook-explained-in-simple-terms-7f05b0cc55fe.
Наприкінці розглянемо JavaScript FormData. Це інтерфейс, який дозволяє створювати та маніпулювати даними форм таким чином, що це максимально нагадує, як працюють HTML форми. Він дозволяє легко збирати дані з різних елементів введення, таких як текстові поля, чекбокси та інпути для файлів. FormData організовує ці дані у вигляді пар ключ-значення, що робить його ідеальним для відправки структурованих даних на сервер. Він використовує той самий формат, який би використовувала форма, якщо тип кодування був налаштований на «multipart/form-data». Ви також можете передати його безпосередньо в конструктор URLSearchParams, якщо хочете згенерувати параметри запиту так, як це робила б форма, використовуючи просту GET-форму.
Щасливого кодування, всі! Якщо ви вважаєте, що є якийсь аспект, який я повинен розглянути більш детально, дайте знати в коментарях.
Перекладено з: HANDLING FORMS IN REACT