Одна вещь, которую я понял, изучая разработку программного обеспечения, заключается в том, что формы составляют половину функциональности приложения. Чем больше данных требуется, тем больше форм используется. Контролируемая форма — это очень полезный шаблон для создания объектов 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() может быть любым поведением, которое вы хотите. В этом примере показана интерполированная строка для отображения значений пользователя.

Посмотрите на это в действии с этим заменителем. Дайте мне знать, если это можно улучшить или у вас есть какие-либо сборки. Удачного кодирования.