Типизация неуправляемой формы в React
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2022
- Типы React формы. Смотрим как можно работать с неуправляемой формой без использования рефов и как это возможно с TypeScript.
Код из видео codesandbox.io/s/unruffled-te...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Спасибо за видео, реакт + тс - мастхэв, при этом не так уж и много хороших пособий об этом. Хотелось бы в будущем увидеть что-то о типизации хуков.
Кратко, качественно и по существу!
Однозначно, буду использовать в своих проектах (вместо кучи useState)
Cпасибо, огромное Михаил!!! Снимайте ещё, очень доступно объясняете. Вы делаете этот мир лучше!!!
Михаил, спасибо за видео! Инфа годная, рассказываешь хорошо, приятно слушать. Успехов!
Это просто класс! Спасибо!
ой какая же круть, супер полезный контент, низкий поклон правда, на курсах даже не найдешь такого)
Очень классно и элегантно) 🙏🏻💪🏻
Охереть как круто! Я прям кайфую от разбора.
Я бы с удовольствием бы посмотрел уроки длинной 40+ минут. Очень качественно. Спасибо.
Супер! Спасибо за видео! Лайк! #react #typescript #javascript #js #ts
Интересный подход спасибо
Миша, мне кажется твоим голосом нужно вообще все обучалки озвучивать. Очень хорошо поставлена интонация, размеренно плавно уверенно. Красава!!!!
Часто бывает, что названия полей в форме соответсвует названием полей в типе используемых данных формы (хоть и не всегда). Сейчас в Вашем примере Вы отдельно объявляете FormFields и LoginFormFields. И там и там одинаковые названия "свойств". Чтобы этого избежать, можно использовать такую конструкцию:
type FormFields = {
[F in keyof LoginFormFields]: HTMLInputElement
};
Тогда, при добавлении нового поля в форму (fullName, например) нужно будет расширить только один тип - LoginFormFields
Фактически получили дыру, так как типизация хоть и есть, но она только на словах и ничего не гарантирует. Если не окажется полей с нужными именами, то получим call property of undefined, прямо в рантайме. Тут надо типизировать сам компонент формы, чтоб в зависимости от переданного ему типа, он требовал бы наличие определенных полей с конкретным именем, ну и соответственно самостоятельно выводил бы свой тип, на основе переданных полей и их имен.
При такой реализации Form, получается мы не может динамически валидировать вводимые данные, только встроенной валидацией и всю форму?
Мерси
9:45 formFields откуда берется? ты его не импортишь, откуда он там берется?
Эти значения приходят из полей форм при onSubmit
@@CyberGenius777 Каким образом? Я понимаю, что они туда должны приходить, но в элементе просто вызов функции без параметров. Как он понимает, что это именно те значания, которые нужны?
@@ringnull почитай как форма работает
@@CyberGenius777 там где-то реф стоит и я не заметил этого или что?
@@ringnull вообще то объявляет этот тип прямо в этом файле 6:28, если все еще не понятно, то под видео есть ссылка на код из видео, открой и посмотри
Спасибо за видео, узнал дополнительную информацию о типизации ивентов. Попробовал воспользоваться твоим способом, но столкнулся с проблемой. При использовании Rеact Testing Library при тестировании формы в фунции обработчике handleChange падает ошибка event.currentTarget.submitBtn is undefined. Однако в браузере все работает. Пока не нашел в чем причина. Возможно ты знаешь в чем дело?
UPD: Нашел решение. В моем случае нужно к искомому элементу обращаться e.currentTarget.elements.submitBtn. Но тогда сам евент достаточно типизировать как обычно, а elemets нужно типизировать как пересечение типов HTMLFormControlsCollection & FormFields