В этом уроке мы сделаем пользовательские кастомные хуки для валидации и обработки инпутов на React js. Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/fron... Первое видео про валидацию - • Валидация форм на Reac...
спасибо за контент + можно еще так: onChange = {login.onChange} а в useValidation записывать все ошибки в обьект const [errors, setErrors] = useState({})
Ulbi, объясни кое-что, пожалуйста. В данном примере когда мы покидаем поле - выводится ошибка, но если написать короткий пароль и поле не покидать, нет оповещения что пароль не валидный.. Я пытаюсь эту валидацию использовать у себя в проекте, но хочется чтобы не покидая поле сразу вызвало варнинг что пароль короткий.. С другой стороны тут еще есть isDirty, на нее все завязано, ни туда ни сюда. Что-то не пойму как сделать.
Тимур спасибо что делишься знаниями!!! кто-нибудь решил как показывать ошибки пользователю не хардкодно? буду благодарен если кто скинет код , многим будет интересно)))
Спасибо за материал. А зачем используется хук useEffect в валидаторе? Разве не будет каждый раз и так отрабатывать функция useValidation при рендеринге?
@@UlbiTV Спасибо. А тебя бы не затруднило поглядеть на код? делаю по твоему примеру но немного изменил, чтобы удобнее ошибки выводить. И у меня в бесконечный цикл возникает и всё. Зависимости в массив useEffect передал, они не изменяются, а бесконечный цикл возникает всё равно из за эффекта. Уже часов 5 сижу не могу понять... Был бы очень благодарен.
Как решить проблему с ререндерами в хуках? когда меняется значения в одном поле перерендеривается компонент, функции пересоздаются и вызывается куча useInput-ов опять
Привет, подумал над тем как сделать вывод ошибок в компоненте и пришел к выводу, что лучше будет если хук useValidation будет возвращать только одну ошибку, ведь компоненту который её будет выводить(презентационному) в принципе без разницы что-за ошибка там будет. Хотелось бы узнать твое мнение по этому поводу
Привет!) Зависит от ситуации, с моим вариантом можно по разному обрабатывать ошибки и делать разные стили) Но в большинстве случаев подойдет и то, о чем ты сказал
Благодарю за отзыв, хуки не заменяют редакс, хуки - функционал, редакс - менеджер состояния, да и логики на редакс в этом плейлисте не было, это серия роликов именно про валидацию.
@@UlbiTV Шикарно быстрый ответ. Спасибо. Я говорил прежде всего про проект файлохранилища, можно ли было все данные собирать исключительно через хуки (useReducer, useState и.т.д)? И есть ли выгода от использования react-redux прослойки по сравнению с хуками?
@@olegvi5183 Ну смотри, useReducer\useContext уже могут заменить редакс в небольших проектах вполне, useState это локальное состояние компонента, я рассказываю почему это не всегда хорошо в одном из последних роликов про редакс. А те хуки которые мы делали в ролике, они несут в себе исключительно функционал по валидации и никак с редаксом впринципе не связаны)
Агонь! Очень полезное видео! Вопрос: Как завалидовать инпут с регуляркой только на числа? const regNumbers = /^[0-9]+$/ regNumbers.test(String(value).toLowerCase()) ? setOnlyNumbers(false) : setOnlyNumbers(true) Такой вариант не работает.
Есть ли смысл делать useValidation хуком? Или это для примера сделано? И можно просто описать функцию validation без реактовских хуков и принципиального отличия не будет.
Почему, когда я разделяю код на компоненты, смена кнопки отправки запроса на активную и неактивную перестает работать? У меня есть компоненты, ValidationForm - здесь код валидации, register, в нем компоненты AuthBottom - здеь кнопка, AuthForm - здесь форма. В AuthBottom я создаю объект из email и password, к которым приравниваю результат импортированной функции useInput
У меня тут все таки пара уточнений зачем для задания булевых значений тернарный оператор по булевому? И !!никто не отменял для преобразования всего остального в будево
Можно же вместо value.length < validations[validation] ? setMinLengthError(true) : setMinLengthError(false) написать setMinLengthError(value.length < validations[validation) Аналогично и с setEmpty(!value) Или это для читаемости так написано?
а как это так хитро из одного хука вызван другой хук? ведь хук не может быть вызван в другом хуке. как минимум у меня это не получилось, а в канале по реакту мне ответили что так и должно было быть. а тут как-то все работает.
