Когда я начал писать проекты в React, одной из моих первых задач была обработка ввода данных от пользователей. После создания целевой страницы для моего веб-сайта я решил, что следующим логическим шагом будет создание компонентов регистрации и входа.
Для обработки входных данных я изначально создал отдельные части состояния с хуками. К сожалению, это означало, что у меня было отдельное состояние для имени, электронной почты, возраста, пола и т. д. Я знал, что это не СУХОЙ код, но меня это не беспокоило, пока я не понял, что мне придется реализовать тот же код на странице входа. Я не мог иметь этот беспорядочный повторяющийся код в своем проекте, поэтому я начал искать более элегантное решение.
То, что я обнаружил, было комбинацией синтаксиса es6 и пользовательских хуков для всех входных данных в моих проектах. Приведенный ниже код представляет собой собственное решение ловушки, которое я создал и экспортировал, где это необходимо, в свой проект.
Приведенный выше код объединяет оператор распространения для передачи предыдущих значений состояния при обновлении нового ключа и значений на основе jsx и пользовательского ввода. После создания кастомного хука вы должны импортировать его в нужный файл и деструктурировать функции для кастомного хука.
