Одна вещь, которую я понял, изучая разработку программного обеспечения, заключается в том, что формы составляют половину функциональности приложения. Чем больше данных требуется, тем больше форм используется. Контролируемая форма — это очень полезный шаблон для создания объектов JavaScript из входных данных формы.
Впервые я столкнулся с компонентом контролируемой формы во время изучения React. Позже, принимая вызов кода, я использовал тот же шаблон в ванильном JavaScript. Ниже приведен простой пример, иллюстрирующий работу контролируемой формы.
Создать HTML-форму
Для демонстрации этот пример представляет собой HTML-форму. Однако тот же шаблон может быть создан динамически.
<!-- index.html --> <form id="form" onsubmit="handleSubmit(event)"> <label>Name:</label> <input id="name" name="name" oninput="handleChange(event)"> <br> <label>Email:</label> <input id="email" name="email" oninput="handleChange(event)"> <br> <input type="submit" value="Submit"></input> </form>
Контрольный список HTML:
- Назначьте атрибут id каждому входу. (Атрибуты данных также будут работать.)
- Каждый элемент ввода должен иметь прослушиватель событий/атрибут
oninput
. Ему нужно назначить функцию и передать событие в качестве аргумента.handleChange()
— это функция, которая будет вызываться каждый раз при вводе значения в поле ввода. - ввод HTML с атрибутом типа «отправить».
onsubmit
прослушиватель событий/атрибут, связанный с функциейhandleSubmit()
.- Будьте конкретны в том, как вы называете атрибуты id, так как они позже повлияют на поведение.
Разбивка HTML:
Ключевыми выводами являются тег form
, а теги input
вызывают различные функции JS. Для каждого из тегов input
вызывается handleChange(event)
с событием в качестве аргумента. Событие используется в файле сценария для извлечения идентификатора тега input
.
Вход submit
вызовет handleSubmit(event)
и отдельно передаст собственное событие.
Добавьте JavaScript:
// app.js let user = {} const handleChange = (event) => { event.preventDefault(); let key = event.target.id; let value = event.target.value; user[key] = value; console.log(user); } const handleSubmit = (event) => { event.preventDefault(); alert(`This is the ${user.name} and the ${user.email}`); }
Контрольный список JavaScript:
- Создайте переменную, установленную для пустого объекта, в данном случае «разрешить пользователю».
- Не забывайте
event.preventDefault()
. - Убедитесь, что имена функций соответствуют правильным элементам в файле HTML.
Разбивка JS:
Поскольку handleChange()
вызывается двумя разными тегами input
, а каждый тег input
имеет свой собственный атрибут id, при каждом нажатии клавиши пользовательскому объекту назначается новый ключ, равный идентификатору элемента input
. Итак, input
для имени создает ключ для пользовательского объекта. Одновременно присваивается значение
При каждом нажатии клавиши handleChange()
создает ключ для пользовательского объекта. Имя ключа объекта совпадает с атрибутом id элемента input
. Значение внутри элемента input
немедленно присваивается этому ключу.
Поскольку данные вводятся в другой элемент input
, создается новое имя ключа объекта. Поскольку создается новый ключ объекта, значения одного поля не будут перезаписывать значения другого ключа.
handleSubmit()
может быть любым поведением, которое вы хотите. В этом примере показана интерполированная строка для отображения значений пользователя.
Посмотрите на это в действии с этим заменителем. Дайте мне знать, если это можно улучшить или у вас есть какие-либо сборки. Удачного кодирования.