Важное примечание к видео! На видео используется react-hook-form вероятно 6-ой версии. В 7ой версии произошли важные изменения. Чтобы код работал необходимо внести изменения. У инпутов: ref={rregister} заменить на {...register('fiieldName')} при вызове useForm const {register, handleSubmit, errors} = useForm({mode: 'onBlur'}); заменить на const {register, handleSubmit, formState: {errors}} = useForm({mode: 'onBlur'});
у кого не работают роуты, react-router-dom обновился и надо заменить Switch на Routes, еще component заменить на element и в фигурных скобках в элементе название роута оборачивать < /> вот : In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from import { Switch, Route } from "react-router-dom"; to import { Routes ,Route } from 'react-router-dom'; You also need to update the Route declaration from to
У кого ошибка "TypeError: path.split is not a function in react", перепишите ref={register} на {...register('firstName')}. В новой версии библиотеки произошли изменения.
Очень хороший туториал для построения формы) Единственный момент, когда я начинал смотреть, то почему-то подумал, что тут нужны только знания азов React и парочки базовых Хуков, но... как оказалось, предполагалось уверенное знание React, включая Реакт Роутер и знание библиотеки стилей и ее базового синтаксиса... В итоге далеко не все понял, но видео, очевидно, не было рассчитано на совсем начинающего React разработчика, так что наверное проблема понимания - это уже моя проблема) И да, насколько я понимаю, автор видео очень занят, ибо не отвечает на комментарии... В любом случае, спасибо за контент и буду рад другим урокам и гайдам по React.
Привет всем из 2022! Мучалась с forwardRef и register, не работала валидация по блюру (менно с компонентов mui ). Перешла на компонент , описан в документации react hook form. Все работает!
Тема из укрока + разные гаммы: 1. Material theme ocean high contrast 2. Community material theme ocean high contrast (чуть гамма подкручена) 3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного) gl =)
Здравствуйте! Вопрос по работе с инпутами ---Общее положение дел У меня есть коллекционные карточки Карточка с одним изображением может издаваться на разных языках Ранние выпуски карточек издавались на меньшем количестве языков ---Что хочу сделать Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам ---Как я представляю хранение карточек ИД - итерируемое ИД_выпуска - Номер выпуска, к которому принадлежит карточка Название_карточки - скажем так... наименование того, что изображено Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком ---Как я это вижу на странице На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются. ---Вопрос Как эти импуты описать и как к ним обращаться для получения данных?
Step3 не выводит список файлов из Dropzone! Приложение падает. Исправляем: в файле FileInput компонент Controller -> render={({onChange, onBlur, value}) поменять на render={({field: {onChange, onBlur, value} }). А чтобы исправить warning добавьте в Controller значение shouldUnregister={true}
1:04:59 "И вот тут интересно. Если мы сейчас оставим телефон введенным... снимем галочку..." то на 1:05:13 увидим в таблице введенный ранее номер, хотя галочка снята. Надо очищать стейт с номером телефона при снятии галочки
Пиздец один из самых полезных роликов по реакт хук форм, жаль автор забросил канал. Да по всему фронту бы такие уроки сделать)) и курсы не нужны, автору реально респект, давай возвращайся
Если у кого то не работает 3 шаг с файлами - замените строку render={({ onChange, onBlur, value }) => () на render={({ field: { onChange, onBlur, value } }) => ()
Я кстати так и сделал, но проблема в другом немного, он у меня почему-то вообще не выводит Finder (Проводник) при нажатии по карточке, для выбора файла
спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
Спасибо! Видео было полезным. Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится
Привет!спасибо за видео Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется
Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)
Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов
За 2 года произошло столько изменений, что большая часть того, что объясняется в видео, уже не работает. Даже не буду расписывать, слишком длинно получится. Так что совсем не для новичков, потому что надо хорошо понимать, что вообще происходит, уметь разбираться в документации. По сути просто идея, которую наполовину надо реализовать самому. Если хотите, чтобы код работал, найдите другое видео)
Очень годный туториал, но есть парочку моментов, которые, было бы вообще здорово, если вы рассмотрите как развитие данного туториала. Вторая, более короткая серия так скажем. 1. Зачем было добавлять в проект пакет "material-ui" который deprecated и уже минимум 2 года не поддерживается? Тем более что в проекте он задействован не был. 2. Поработать со страницей result, выводя в таблице не field name, а более осмысленный title для каждой строки. 3. Недоработка с телефоном и флагом показывающим его. 3.1. Отображение статуса hasPhone на странице result? Если и отображать, то только случай false, когда телефон не был введён, и более осмысленно чем false. 3.2. Введя телефон, затем, заполняя форму по второму кругу, отключить если флаг hasPhone, то в итоговой форме телефон всё равно отобразиться. 4. Возможность перезагрузить страницу на любом этапе из формы. Если этап будет отличен от первого, то это почти 100% необходимость делать start over чтобы заполнить предыдущие шаги. Или начинать с первого этапа, или хранить промежуточное состояние в localStorage. Не считая первого пункта, кейсы то реальные, и недопустимы в production приложении. В остальном шикарно.
@@Elator11777 специально в кавычки название пакета взял. www.npmjs.com/package/material-ui вот. Красным по розовому написано. 2:52 вот здесь он добавляется в проект. И именно этот пакет не был использован. Про @material-ui/core я ни слова не сказал :)
Согласен, что в production не допустимы. Но тут в production никто заливать не собирался, это ведь туториал, причем очень хороший. твои доработки это лишь дело техники.
по факту, если разобраться, в создании отдельных компонентов по типу (Form, Input и тп) только ради стилей нету необходимости. просто используйте styled-components или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо
Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?
Важное примечание к видео! На видео используется react-hook-form вероятно 6-ой версии. В 7ой версии произошли важные изменения. Чтобы код работал необходимо внести изменения.
У инпутов: ref={rregister} заменить на {...register('fiieldName')}
при вызове useForm
const {register, handleSubmit, errors} = useForm({mode: 'onBlur'});
заменить на
const {register, handleSubmit, formState: {errors}} = useForm({mode: 'onBlur'});
Спасибо бро
Не знал что Тэон Грейджой на Реакте пишет 😂
Ахахахах ))))
Пошутил, а человек больше видео не выпускает)
@@trimmtrabb7629 пздц, знал бы не писал :d
у кого не работают роуты, react-router-dom обновился и надо заменить Switch на Routes, еще component заменить на element и в фигурных скобках в элементе название роута оборачивать < />
вот :
In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
You also need to update the Route declaration from
to
Очень круто, жаль, что забросил. вот если бы раз в месяц бомбил бы такие видосы, со всякими сверхпопулярными компонентами... вот это контент был бы
классное объяснение про сложные вопросы React Hook Form. Спасибо!!!
Спасибо, вам большое за ваш труд.
Было бы круто, если бы вы продолжили снимать видео на русском)
Ну красавчик, объяснение на высшем уровне. У тебя явно есть способности к обучению.
У кого ошибка "TypeError: path.split is not a function in react", перепишите ref={register} на {...register('firstName')}.
В новой версии библиотеки произошли изменения.
Спасибо за видео. На просторах youtube часто не хватает материала для уровня чуть выше базового, а здесь освещены и непростые моменты с формами
Очень крутое видео. Побольше бы таких.
Спасибо за твои видео, действительно качественный контент, подходит не только для начинающих, продолжай в том же духе!)
Для тех у кого ошибка Path.split is not a function нужно поменять ref={register} на {...register('firstname')}
Спасибо, добрый человек.
Очень хороший туториал для построения формы) Единственный момент, когда я начинал смотреть, то почему-то подумал, что тут нужны только знания азов React и парочки базовых Хуков, но... как оказалось, предполагалось уверенное знание React, включая Реакт Роутер и знание библиотеки стилей и ее базового синтаксиса... В итоге далеко не все понял, но видео, очевидно, не было рассчитано на совсем начинающего React разработчика, так что наверное проблема понимания - это уже моя проблема) И да, насколько я понимаю, автор видео очень занят, ибо не отвечает на комментарии... В любом случае, спасибо за контент и буду рад другим урокам и гайдам по React.
Да на самом деле час потратить на документацию и все. Там много хороших примеров и все не так сложно как кажется.
Большое спасибо! Офигенный видос!
Спасибо за это видео! Профессионально и информативно. Успехов Вам!
Очень классный материал, спасибо большое Максим)!
Тоже думаю перейти на реакт хук форм. Спасибо за видео.
Уже немало времени занимаюсь изучением реакта, но это понимается очень тяжело. Очень много инструментов задействовано. А в целом хороший материал.
Даа мощная форма, у меня как-то в такой на каком-то шаге была динамическая таблица с инпутами и крадами 😅
Привет всем из 2022! Мучалась с forwardRef и register, не работала валидация по блюру (менно с компонентов mui ). Перешла на компонент , описан в документации react hook form. Все работает!
Olga, а makeStyles у вас работает?
П.С. Для валидации номера телефона тоже лучше использовать проп rules у контроллера и аналогичную функцию
Подскажите пожалуйста, какую версию node js вы использовали?
@@ff1cer___hernandez >=6.9.0
Уважаемая публика, сейчас нужно yupResolver доставать из @hookform/resolvers/yup, а ошибки получать из formState:{ errors }
Спасибо!!
Спасибо!
Отличный пример работы! Спасибо
Тема из укрока + разные гаммы:
1. Material theme ocean high contrast
2. Community material theme ocean high contrast (чуть гамма подкручена)
3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного)
gl =)
Cпасибо мужик)
Здравствуйте!
Вопрос по работе с инпутами
---Общее положение дел
У меня есть коллекционные карточки
Карточка с одним изображением может издаваться на разных языках
Ранние выпуски карточек издавались на меньшем количестве языков
---Что хочу сделать
Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам
---Как я представляю хранение карточек
ИД - итерируемое
ИД_выпуска - Номер выпуска, к которому принадлежит карточка
Название_карточки - скажем так... наименование того, что изображено
Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком
---Как я это вижу на странице
На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются.
---Вопрос
Как эти импуты описать и как к ним обращаться для получения данных?
Step3 не выводит список файлов из Dropzone! Приложение падает. Исправляем: в файле FileInput компонент Controller -> render={({onChange, onBlur, value}) поменять на render={({field: {onChange, onBlur, value} }). А чтобы исправить warning добавьте в Controller значение shouldUnregister={true}
спасибо - это капец - у всех остальных что ли и так получилось - имею в виду тех кто уже пытался это воплотить на более поздних версиях реакта
@@olenakunina1на 20 версии node js, вообще не запускается репозиторий с его гита
Огромное спасибо за ваше видео, оно мне очень помогло! Лайк и подписка обязательно.
Спасибо за качественный контент! Лайк, подписка!
Классное видео! Спасибо Вам за труд!
Привет! Только что подписался на вас . У вас отличный английский .
1:04:59 "И вот тут интересно. Если мы сейчас оставим телефон введенным... снимем галочку..." то на 1:05:13 увидим в таблице введенный ранее номер, хотя галочка снята. Надо очищать стейт с номером телефона при снятии галочки
Спасибо, классное видео, про тестирование было бы интересно
Годно, ставлю лукас
Пиздец один из самых полезных роликов по реакт хук форм, жаль автор забросил канал. Да по всему фронту бы такие уроки сделать)) и курсы не нужны, автору реально респект, давай возвращайся
у него другой канал, вбей в поиск - Maksim Ivanov
Если у кого то не работает 3 шаг с файлами - замените строку render={({ onChange, onBlur, value }) => () на render={({ field: { onChange, onBlur, value } }) => ()
Я кстати так и сделал, но проблема в другом немного, он у меня почему-то вообще не выводит Finder (Проводник) при нажатии по карточке, для выбора файла
спасибо🤜
Thank you so much for the lesson.
thank you super useful lesson, do more of these!
Было бы неплохо, если бы вы записали пример формы, но, которая сохраняется в json.
спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
2 раз делаю подписку и на кого то спасибо за видео
Очень круто. Будут ещё видео?)
В компоненте PrimaryButton ошибочка c rest параметрами -> надо вот так export const PrimaryButton = ({children, ...props}) =>{}
Уважаемый автор видео, обнови его пожалуйста. Твой код устарел безнадежно. Для кастомизации сейчас нужно использовать Controller.
Круто. Спасибо за инфо. Подскажи, что за тема на VSCode? Такую же хочу поставить
Спасибо! Видео было полезным.
Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится
любой state manager решит твою проблему
У меня вообще не работает чекбокс и контролер формы. Есть кто с 2023?
селектов не хватает)
Привет!спасибо за видео
Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется
Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)
Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов
Спасибо!
изначально на показе страницы, 1:14 вроде маска +1 вводилась автоматом, только ради этого смотрел видео на перемотке, а в итоге про маску ни слово
Интересно получилось) Жаль нет репозитория, с сервером поиграться.
Бро, каким расширением пользуешься для форматирования?
А репо будет на гитхабе?
Привет 🙋♂️
А подскажи плиз extension который autocompleting css ты используешь vscode :)
Чел ну вернись, правда
Не ну ты вернись
За 2 года произошло столько изменений, что большая часть того, что объясняется в видео, уже не работает. Даже не буду расписывать, слишком длинно получится. Так что совсем не для новичков, потому что надо хорошо понимать, что вообще происходит, уметь разбираться в документации. По сути просто идея, которую наполовину надо реализовать самому. Если хотите, чтобы код работал, найдите другое видео)
можешь скинуть видео
Очень годный туториал, но есть парочку моментов, которые, было бы вообще здорово, если вы рассмотрите как развитие данного туториала. Вторая, более короткая серия так скажем.
1. Зачем было добавлять в проект пакет "material-ui" который deprecated и уже минимум 2 года не поддерживается? Тем более что в проекте он задействован не был.
2. Поработать со страницей result, выводя в таблице не field name, а более осмысленный title для каждой строки.
3. Недоработка с телефоном и флагом показывающим его.
3.1. Отображение статуса hasPhone на странице result? Если и отображать, то только случай false, когда телефон не был введён, и более осмысленно чем false.
3.2. Введя телефон, затем, заполняя форму по второму кругу, отключить если флаг hasPhone, то в итоговой форме телефон всё равно отобразиться.
4. Возможность перезагрузить страницу на любом этапе из формы. Если этап будет отличен от первого, то это почти 100% необходимость делать start over чтобы заполнить предыдущие шаги. Или начинать с первого этапа, или хранить промежуточное состояние в localStorage.
Не считая первого пункта, кейсы то реальные, и недопустимы в production приложении.
В остальном шикарно.
material-ui depricated?? Откуда такая инфа? Как не использовали, если все текстинпуты, иконки оттуда взяты были?
@@Elator11777 специально в кавычки название пакета взял.
www.npmjs.com/package/material-ui вот. Красным по розовому написано.
2:52 вот здесь он добавляется в проект. И именно этот пакет не был использован. Про @material-ui/core я ни слова не сказал :)
@@mr.younger Спасибо. Не знал.
Согласен, что в production не допустимы. Но тут в production никто заливать не собирался, это ведь туториал, причем очень хороший. твои доработки это лишь дело техники.
Здравствуйте, Максим🙌 Можно связаться с Вами в соцсетях? Спасибо 👍
Привет.
Как сейчас ай ти сфера в Швеции?
Сколько в среднем может получить тестировщик в год?
Как добавить емодзи единорога и коробки?
по факту, если разобраться, в создании отдельных компонентов по типу (Form, Input и тп) только ради стилей нету необходимости. просто используйте styled-components или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо
Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?
Наверное уже не актуально) напишу для тех кто будет читать - можно использовать onChange
FileInput очень сложный для понимания. Такие макароны....
Устрели библиотеки. Нужно все перебирать, переустанавливать.
Ни как не могу победить чекбокс есть/нет телефон для актуальной версии react-hook-form как исправить код в видео?
В FormControlLabel ваш control должен выглядеть следующим образом:
_control={}_
Подскажите какой плагин для форматирования используется либо какой язык выбран в форматировании
prettier скорее всего
а useCallback() там не нужні?
Зачем ты меня вводишь)
с тайпскриптом заняло бы 2 часа)
Какая тема у тебя?
Слишком все запутано. Можно было все сделать проще чтоб все понятно было
26:50 /[a-z]/i/ Вроде так можно
Кабину проще
Что у тебя за темя в vs code
Максим, привет! А можно ссылочку на репозиторий с сервером?
Очень много лишних библиотек, для новичков ничего не понятно
ПОЛ ВИДОСА НЕ ПО ТЕМЕ БЛЯТЬ И ТАЙМКОДОВ ДАЖЕ НЕТ - ЖИРНЫЙ ДИЗЛАЙК!!!
видео 2020 года если что, автор давно забыл про канал, а в то время таймкодов даже не было
Самый плохой курс, который я когда нибудь видел. Если сами не знаете, почему снимать курсы. Дизлайк.