Всем привет! С недавнего времени новичок в js и есть вопросы. Предположим мне нужно реализовать форму регистрации.
Есть 4 поля (user_name, email, password и confirmPassword).
Так же есть состояние у формы и полей(для валидации).
1. Создаю класс Register:
class Register{
constructor() {
this.state = {
email: "",
username: "",
password: "",
confirmPassword: "",
loading: false,
};
}
onChange(e) {
this.state[e.target.name] = e.target.value;
}
onSubmit(e) {
const { email, phone, password } = this.state;
const formData = {
email,
username,
password,
};
console.log(formData);
}
}
export const register= new Register();
Внутри, для старта, есть 2 метода: onChange - меняет state в зависимости от вводимых данных и onSubmit - компоновка и отправка данных.
Далее я импорчу созданный объект в index-файл(где подключаю все модули) :
import {register} from './module/Register';
const inputs = document.querySelectorAll('.js-input-valid');
const sendBtn = document.querySelector('.js-send-form');
const registerForm= document.querySelector('.js-register-form');
inputs.forEach((el) => {
el.addEventListener('input', function (e) {
register.onChange(e)
})
});
registerForm.addEventListener('submit', function (e) {
e.preventDefault()
register.onSubmit(e)
})
Далее я вешаю обработчики событий и подключаю функции которые должны вызываться...
Вопросы следующие:
Правильно ли я подошёл к реализации данного модуля ? (смущает то, что я оброботчики событий вешаю вне объекта Register... это можно было бы сделать в constructor, но вроде это мовитон)
Если с reactom понятно как в принципе выстраивать архитектуру, то тут не совсем понятно... В реакте, внутри компонента мы вешаем обработчик событий, привязываем функцию и рендерим компонент... В этом же случае у нас есть вёрстка и нужно к ней привязываться... Как правильно подойти к реализации ?
