В моем последнем проекте веб-сайта мне пришлось столкнуться с двумя основными проблемами: мне нужно было придумать решение, как обрабатывать неизвестное количество полей ввода в контактной форме. Во-вторых, почти на полпути к работе был привлечен специалист по SEO, который потребовал, чтобы сайт был SSR и, следовательно, содержал как можно больше статического контента. Весело, когда вы начинали проект на React, правда?

Контактная форма доставила мне трудности, потому что она сопряжена с несколькими проблемами, с которыми мне пришлось столкнуться, самое главное: 1. она должна была быть статической и 2. хотя клиент сам является разработчиком, я хотел избежать сложности кода в той же степени, что и Я мог бы. Таким образом, очевидный подход использования this.state.inputField1 с this.setState и onClick функцией, которая запускала бы event.target, на самом деле не сработал.

Чем больше я проводил исследований, тем больше я ценил, насколько хорошим стал HTML. Если вы используете опору onSubmit в теге <form>, вы получите обратно все входные данные без использования какого-либо состояния или вообще с помощью всего лишь нескольких строк кода. Позвольте мне привести Вам пример:

И это все! Все, что вам нужно, это 4 строки кода в функции handleSubmit, и вы можете ввести столько полей ввода, сколько хотите в вашей форме (не забудьте name prop для определения различных ключей (значение будет автоматически сгенерировано из введенных вами данных) и кнопки отправки). Вы получите объект, который содержит все определенные поля ввода, даже если они не были внесены заказчиком. Например. если клиент просто указывает свое имя («Питер») и фамилию («Паркер»), а другие обязательные поля не определены, вы получите такой объект, как

{
  "firstName":"Peter",
  "lastName":"Parker",
  "address":"",
  "zip":"",
  "city":"",
  ...
}

Таким образом, вы можете очень легко определить столько полей ввода, сколько захотите, и если вы или ваш клиент хотите их редактировать, вам просто нужно изменить одну строку кода для каждого поля ввода. Побочные эффекты - это отсутствие лишнего рендеринга при обновлении «состояния» (потому что состояния больше нет), отсутствие состояний, которые должны быть определены в первую очередь, никаких хуков, никаких редукторов и т. Д. - и все это происходит быстро. Он работает даже для выпадающего меню, которое можно легко создать с помощью тегов select и option (вы увидите пример позже, когда я подведу итоги, не беспокойтесь).

Но что, если у вас есть флажок, например подписка на рассылку новостей, которая очень часто используется в контактных формах? Что-то вы просто вводите щелчком мыши, правда? Что ж, это тот момент, когда нам нужно немного схитрить. Я считаю, что перехватчики React - самое простое и быстрое решение для этого. Давайте изменим наш код:

Примечание. Я работал с Materialize для проекта, и для полей ввода любого типа изменение значения ввода должно обрабатываться автоматически. По какой-то причине в моем случае этого не произошло, поэтому я придумал этот обходной путь.

Подводя итоги, мы увидели, что нам не обязательно нужно управление состоянием при создании контактных форм / работе с полями ввода, поскольку HTML как бы творит за нас всю магию. Единственный раз, когда нам приходилось использовать перехватчики React, было обновление логического значения. Контактная форма с различными полями ввода, выпадающим меню и флажком может выглядеть так:

Я думаю, что это не только делает код более читаемым, но и увеличивает скорость, поскольку мы почти не используем JS (что приводит к лучшему ранжированию страниц Google) и упрощает добавление / удаление полей ввода в контактную форму.

Это моя первая статья, связанная с программированием, надеюсь, она вам понравилась, и даже лучше, если вы могли бы что-то убрать. Когда я начинал свое исследование, мне было очень трудно найти что-либо вообще, поэтому я надеюсь, что это поможет, если кто-то столкнется с подобной проблемой.

Мы приветствуем обратную связь в любой форме!