No video
Кастомные\самодельные хуки React JS. Валидация
В этом уроке мы сделаем пользовательские кастомные хуки для валидации и обработки инпутов на React js.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/fron...
Первое видео про валидацию -
• Валидация форм на Reac...
Пікірлер: 89
Топ! Единственный канал по программированию, который я смотрю на обычный скорости х1 :) Быстро, разжёванно и без воды👍
@UlbiTV
3 жыл бұрын
Ахах, про х1 сильно конечно, сам обычно в х2 смотрю все, спксибо, друг!)
@user-fi9tn1pr4m
3 жыл бұрын
@@UlbiTV я тоже тебя в 1х смотрю)
@user-hr4my4xs4w
3 жыл бұрын
Иногда х0.5 приходится смотреть
@nicearthes6170
2 жыл бұрын
Жизненно), а ещё приходиться ставить на паузу постоянно
Отличный канал, не бросайте это дело
@UlbiTV
3 жыл бұрын
Спасибо друг, с вашей поддержкой, не брошу)
Как же ты круто объясняешь, никто с тобой даже рядом и не стоит
Топ, можно ещё margin top на input увеличить position relative, и для ошибки position absolute, чтобы не прыгала форма
@UlbiTV
3 жыл бұрын
Спасибо за совет:)
Даже спустя столько времени от даты выпуска лучшее объяснение и пример, спасибо, пробую улучшить)
Так рад что нашел твой канал, не представляешь
@UlbiTV
3 жыл бұрын
Очень рад слышать, спасиб)
спасибо тебе большой! очень годный контент. Не всё понял, конечно. Но с практикой пойму больше. ты лучший!
@UlbiTV
3 жыл бұрын
Спасибо огромное) самое главное практика, практика и еще раз практика)
Чем углубленнее и сложнее тема, тем меньше просмотров) Лайкос!
Соглашусь с комментами ниже, смотрю всегда на скорости х1, Спасибо !
@UlbiTV
3 жыл бұрын
Спасибо!
Спасибо большое! Ценная информация в доступном и самое главное в хорошо изложенном виде)
Лучшие туториалы! Благодарочка🤝
Как всегда супер, благодарю ♡ ♡ ♡ ♡ ♡ ♡
@UlbiTV
3 жыл бұрын
Спасибо за отзыв)
спасибо за контент + можно еще так: onChange = {login.onChange} а в useValidation записывать все ошибки в обьект const [errors, setErrors] = useState({})
Плюс в копилку моих практических знаний! Спасибо Тимур!
Это действительно круто! Большое спасибо
Привет! Отличные уроки, большое спасибо! Исходники урока на гитхабе не лежат? Было бы гораздо удобнее изучать....
Супер, спасибо , всё четко и понятно, как раз недавно сам писал подобное, и решил узнать как можно было ещё написать)
Спасибо, очень доходчиво, очень наглядно
@UlbiTV
3 жыл бұрын
Спасибо!
Спасибо) Мир твоему дому!
Спасибо! Отличный урок!
Спасибо, попробую сделать
Ulbi, объясни кое-что, пожалуйста. В данном примере когда мы покидаем поле - выводится ошибка, но если написать короткий пароль и поле не покидать, нет оповещения что пароль не валидный.. Я пытаюсь эту валидацию использовать у себя в проекте, но хочется чтобы не покидая поле сразу вызвало варнинг что пароль короткий.. С другой стороны тут еще есть isDirty, на нее все завязано, ни туда ни сюда. Что-то не пойму как сделать.
@UlbiTV
3 жыл бұрын
Лучше использовать formik для валидации, этот ролик снят в целях общего развития
ТоП!
@UlbiTV
3 жыл бұрын
спасибо!)
Спасибо за материал. А зачем используется хук useEffect в валидаторе? Разве не будет каждый раз и так отрабатывать функция useValidation при рендеринге?
@UlbiTV
3 жыл бұрын
Спаси!) будет, но тут мы явно отслеживаем изменение value, и функция вызывается только в этом случае
@user-yq5md8ej7l
3 жыл бұрын
@@UlbiTV Спасибо. А тебя бы не затруднило поглядеть на код? делаю по твоему примеру но немного изменил, чтобы удобнее ошибки выводить. И у меня в бесконечный цикл возникает и всё. Зависимости в массив useEffect передал, они не изменяются, а бесконечный цикл возникает всё равно из за эффекта. Уже часов 5 сижу не могу понять... Был бы очень благодарен.
@UlbiTV
3 жыл бұрын
@@user-yq5md8ej7l Давай, присылай, гляну как минутка будет!)
@user-nw5br5jg9k
2 жыл бұрын
@@user-yq5md8ej7l привет, такая же проблема возникла, как решил?
люблю!)
@UlbiTV
3 жыл бұрын
Взаимно!))
Тимур спасибо что делишься знаниями!!! кто-нибудь решил как показывать ошибки пользователю не хардкодно? буду благодарен если кто скинет код , многим будет интересно)))
@pseudonim510
Жыл бұрын
Тоже интересует
Как решить проблему с ререндерами в хуках? когда меняется значения в одном поле перерендеривается компонент, функции пересоздаются и вызывается куча useInput-ов опять
@UlbiTV
3 жыл бұрын
Использовать useRef и переделывать хук для валидации)
@sega21rus98
3 жыл бұрын
@@UlbiTV да я что-то копался, но решил в итоге не возиться и сделал через formik
@StarkeshBrose
Жыл бұрын
@@sega21rus98 😂😂
Привет, подумал над тем как сделать вывод ошибок в компоненте и пришел к выводу, что лучше будет если хук useValidation будет возвращать только одну ошибку, ведь компоненту который её будет выводить(презентационному) в принципе без разницы что-за ошибка там будет. Хотелось бы узнать твое мнение по этому поводу
@UlbiTV
3 жыл бұрын
Привет!) Зависит от ситуации, с моим вариантом можно по разному обрабатывать ошибки и делать разные стили) Но в большинстве случаев подойдет и то, о чем ты сказал
спасибо, а почему ранее часть логики была сделана через редакс, если можно было все через хуки?
@UlbiTV
3 жыл бұрын
Благодарю за отзыв, хуки не заменяют редакс, хуки - функционал, редакс - менеджер состояния, да и логики на редакс в этом плейлисте не было, это серия роликов именно про валидацию.
@olegvi5183
3 жыл бұрын
@@UlbiTV Шикарно быстрый ответ. Спасибо. Я говорил прежде всего про проект файлохранилища, можно ли было все данные собирать исключительно через хуки (useReducer, useState и.т.д)? И есть ли выгода от использования react-redux прослойки по сравнению с хуками?
@UlbiTV
3 жыл бұрын
@@olegvi5183 Ну смотри, useReducer\useContext уже могут заменить редакс в небольших проектах вполне, useState это локальное состояние компонента, я рассказываю почему это не всегда хорошо в одном из последних роликов про редакс. А те хуки которые мы делали в ролике, они несут в себе исключительно функционал по валидации и никак с редаксом впринципе не связаны)
top!!!
@UlbiTV
3 жыл бұрын
thx!)
Топ!
@UlbiTV
3 жыл бұрын
Спасибо)
а как его использовать в других компонентах? у меня одна валидация формы на 8 страниц
Спасибо за видео! А есть примеры как тестировать такие хуки?
Есть ли смысл делать useValidation хуком? Или это для примера сделано? И можно просто описать функцию validation без реактовских хуков и принципиального отличия не будет.
@UlbiTV
3 жыл бұрын
принципы абсолютно разные есть, и подход может быть разный)
@UlbiTV
3 жыл бұрын
хуки по сути и есть обычные функции, только с некоторыми правилами
У меня InputValidate не работает от слова совсем. В чём пробелма не пойму, всё время возвращает false
@aniutaani9036
2 жыл бұрын
у меня таже проблема
Почему, когда я разделяю код на компоненты, смена кнопки отправки запроса на активную и неактивную перестает работать? У меня есть компоненты, ValidationForm - здесь код валидации, register, в нем компоненты AuthBottom - здеь кнопка, AuthForm - здесь форма. В AuthBottom я создаю объект из email и password, к которым приравниваю результат импортированной функции useInput
Агонь! Очень полезное видео! Вопрос: Как завалидовать инпут с регуляркой только на числа? const regNumbers = /^[0-9]+$/ regNumbers.test(String(value).toLowerCase()) ? setOnlyNumbers(false) : setOnlyNumbers(true) Такой вариант не работает.
@Max-kr4ie
3 жыл бұрын
//не работает с отрицательными const isNumber = (str) => { var pattern = /^\d+$/; return pattern.test(str); // returns a boolean } //работает с отрицательными const isUpdateNumber = (str) => { var pattern = /^[\+\-]?\d*\.?\d+(?:[Ee][\+\-]?\d+)?$/; return pattern.test(str); // returns a boolean }
Ребята, нужно сделать чтобы при вводе даты, например 11/22, косая черта вводилась автоматически, куда можно засунуть этот алгоритм?
спасибо! все четко
Как сделать в таком случае reset форме?
спасибо большое! отличные уроки. а как сбросить поля формы после отправки?
@NatashaYepanchina
Жыл бұрын
у вас получилось?
@JoKERIFreeStyleI
Жыл бұрын
@@NatashaYepanchina форме надо .reset()
У меня тут все таки пара уточнений зачем для задания булевых значений тернарный оператор по булевому? И !!никто не отменял для преобразования всего остального в будево
Thanks a lot !!!
Спасибо большое! Github - есть
а как это так хитро из одного хука вызван другой хук? ведь хук не может быть вызван в другом хуке. как минимум у меня это не получилось, а в канале по реакту мне ответили что так и должно было быть. а тут как-то все работает.
useEffect 2й лишний
Атдушииииии
@UlbiTV
3 жыл бұрын
Спаааасибо
Пожалуйста подкиньте идею, как можно возвращать еще и текст ошибки?
Можно же вместо value.length < validations[validation] ? setMinLengthError(true) : setMinLengthError(false) написать setMinLengthError(value.length < validations[validation) Аналогично и с setEmpty(!value) Или это для читаемости так написано?
Не нужно городить такую регулярку для email. Хорошая регулярка для валидации email это .@.
НОЛЬ дизлайков, это уже топчик)
я бы задонатил за такие ролики, но пока не зарабатываю деньги для Доната
Огромное спасибо, за старания и вклад!