Состояние форм – отдельная тема для обсуждения. Существует два подхода к обработке состояния формы. Один из них отдаёт контроль состояния самой форме, другой предполагает его хранение в пользовательском приложении. Оба подхода имеют свои плюсы и минусы, которые обязательно надо знать при выборе того или иного решения.
В документации React такие подходы называют контролируемыми и неконтролируемыми формами. Эти названия довольно точно описывают происходящее, поэтому здесь мы будем использовать ту же терминологию.
Подход, при котором состояние формы хранится внутри самой формы и извлекается только при её отправке. Это привычный способ работы с формой вне фреймворков:
form.addEventListener('submit', (e) => {
const formData = new FormData(e.target);
// Обработка данных, например, отправка на сервер
});
К достоинствам этого способа относят:
Несмотря на лёгкость и очевидность, этот подход обладает одним недостатком. При таком подходе невозможно реагировать на изменения формы в процессе её заполнения. Где это может быть нужно? Вот несколько примеров:
В такой ситуации нам понадобятся контролируемые формы.
При таком подходе состояние всех элементов формы отслеживается кодом приложения. Любое изменение анализируется и сохраняется. В зависимости от текущего состояния данных, код принимает решение что показать, а что нет. В таких формах зачастую даже нет кнопки отправки. Особенно там, где формы выполняют фильтрацию данных.
const state = {
registrationForm: {
state: 'valid',
data: {
name: '',
email: '',
},
errors: [],
},
};
// https://github.com/sindresorhus/on-change
const watchedState = onChange(state, (path, value) => {
if (path === 'registrationForm.state') {
if (value === 'invalid') {
// Отрисовка ошибок, хранящихся где-то в состоянии
// watchedState.registrationForm.errors
}
}
});
form.elements.name.addEventListener('change', (e) => {
watchedState.registrationForm.data.name = e.target.value;
// Действия: валидация, запросы, ...
});
form.elements.email.addEventListener('change', (e) => {
watchedState.registrationForm.data.email = e.target.value;
// Действия: валидация, запросы, ...
});
Если понадобится отправить эту форму, то сделать это будет даже проще, чем с неконтролируемыми формами. Данные уже извлечены из формы и готовы к отправке.
form.addEventListener('submit', (e) => {
// Обработка данных, например, отправка на сервер
// watchedState.registrationForm.data
});
Преимущества такого подхода:
И недостатки:
Контролируемые формы требуют настолько больше кода, что работу с ними всячески пытаются автоматизировать. Создают библиотеки, например, garlic.js, которые в автоматическом режиме отслеживают изменение формы и предоставляют колбеки для реакции на эти изменения.
Особенно таких библиотек много для разных фреймворков. Например, в React их десятки.
В чистом JS предпочтительнее неконтролируемые формы. Так намного проще и быстрее. И только в том случае, когда нужна мгновенная реакция, можно вводить контроль данных формы. Причём не обязательно переходить от одного способа к другому целиком. Можно использовать гибрид, вводить контроль только тех данных, где без этого никак.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт