Важное примечание к видео! На видео используется 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. Все работает!
спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
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 (Проводник) при нажатии по карточке, для выбора файла
Тема из укрока + разные гаммы: 1. Material theme ocean high contrast 2. Community material theme ocean high contrast (чуть гамма подкручена) 3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного) gl =)
Пиздец один из самых полезных роликов по реакт хук форм, жаль автор забросил канал. Да по всему фронту бы такие уроки сделать)) и курсы не нужны, автору реально респект, давай возвращайся
Здравствуйте! Вопрос по работе с инпутами ---Общее положение дел У меня есть коллекционные карточки Карточка с одним изображением может издаваться на разных языках Ранние выпуски карточек издавались на меньшем количестве языков ---Что хочу сделать Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам ---Как я представляю хранение карточек ИД - итерируемое ИД_выпуска - Номер выпуска, к которому принадлежит карточка Название_карточки - скажем так... наименование того, что изображено Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком ---Как я это вижу на странице На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются. ---Вопрос Как эти импуты описать и как к ним обращаться для получения данных?
Привет!спасибо за видео Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется
Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)
Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов
Спасибо! Видео было полезным. Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится
Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?
За 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 или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо
Важное примечание к видео! На видео используется 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 часто не хватает материала для уровня чуть выше базового, а здесь освещены и непростые моменты с формами
Спасибо, вам большое за ваш труд.
Было бы круто, если бы вы продолжили снимать видео на русском)
Спасибо за это видео! Профессионально и информативно. Успехов Вам!
Очень классный материал, спасибо большое Максим)!
Очень хороший туториал для построения формы) Единственный момент, когда я начинал смотреть, то почему-то подумал, что тут нужны только знания азов React и парочки базовых Хуков, но... как оказалось, предполагалось уверенное знание React, включая Реакт Роутер и знание библиотеки стилей и ее базового синтаксиса... В итоге далеко не все понял, но видео, очевидно, не было рассчитано на совсем начинающего React разработчика, так что наверное проблема понимания - это уже моя проблема) И да, насколько я понимаю, автор видео очень занят, ибо не отвечает на комментарии... В любом случае, спасибо за контент и буду рад другим урокам и гайдам по React.
Да на самом деле час потратить на документацию и все. Там много хороших примеров и все не так сложно как кажется.
Для тех у кого ошибка Path.split is not a function нужно поменять ref={register} на {...register('firstname')}
Спасибо, добрый человек.
Тоже думаю перейти на реакт хук форм. Спасибо за видео.
Привет всем из 2022! Мучалась с forwardRef и register, не работала валидация по блюру (менно с компонентов mui ). Перешла на компонент , описан в документации react hook form. Все работает!
Olga, а makeStyles у вас работает?
П.С. Для валидации номера телефона тоже лучше использовать проп rules у контроллера и аналогичную функцию
Подскажите пожалуйста, какую версию node js вы использовали?
@@ff1cer___hernandez >=6.9.0
Огромное спасибо за ваше видео, оно мне очень помогло! Лайк и подписка обязательно.
Спасибо за качественный контент! Лайк, подписка!
Уважаемая публика, сейчас нужно yupResolver доставать из @hookform/resolvers/yup, а ошибки получать из formState:{ errors }
Спасибо!!
Спасибо!
Отличный пример работы! Спасибо
Классное видео! Спасибо Вам за труд!
Спасибо, классное видео, про тестирование было бы интересно
Привет! Только что подписался на вас . У вас отличный английский .
спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
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 увидим в таблице введенный ранее номер, хотя галочка снята. Надо очищать стейт с номером телефона при снятии галочки
Годно, ставлю лукас
Даа мощная форма, у меня как-то в такой на каком-то шаге была динамическая таблица с инпутами и крадами 😅
Если у кого то не работает 3 шаг с файлами - замените строку render={({ onChange, onBlur, value }) => () на render={({ field: { onChange, onBlur, value } }) => ()
Я кстати так и сделал, но проблема в другом немного, он у меня почему-то вообще не выводит Finder (Проводник) при нажатии по карточке, для выбора файла
спасибо🤜
thank you super useful lesson, do more of these!
Тема из укрока + разные гаммы:
1. Material theme ocean high contrast
2. Community material theme ocean high contrast (чуть гамма подкручена)
3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного)
gl =)
Cпасибо мужик)
Thank you so much for the lesson.
Уже немало времени занимаюсь изучением реакта, но это понимается очень тяжело. Очень много инструментов задействовано. А в целом хороший материал.
А репо будет на гитхабе?
а useCallback() там не нужні?
Пиздец один из самых полезных роликов по реакт хук форм, жаль автор забросил канал. Да по всему фронту бы такие уроки сделать)) и курсы не нужны, автору реально респект, давай возвращайся
у него другой канал, вбей в поиск - Maksim Ivanov
2 раз делаю подписку и на кого то спасибо за видео
Здравствуйте!
Вопрос по работе с инпутами
---Общее положение дел
У меня есть коллекционные карточки
Карточка с одним изображением может издаваться на разных языках
Ранние выпуски карточек издавались на меньшем количестве языков
---Что хочу сделать
Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам
---Как я представляю хранение карточек
ИД - итерируемое
ИД_выпуска - Номер выпуска, к которому принадлежит карточка
Название_карточки - скажем так... наименование того, что изображено
Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком
---Как я это вижу на странице
На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются.
---Вопрос
Как эти импуты описать и как к ним обращаться для получения данных?
Очень круто. Будут ещё видео?)
Как добавить емодзи единорога и коробки?
Круто. Спасибо за инфо. Подскажи, что за тема на VSCode? Такую же хочу поставить
Было бы неплохо, если бы вы записали пример формы, но, которая сохраняется в json.
Бро, каким расширением пользуешься для форматирования?
селектов не хватает)
Привет 🙋♂️
А подскажи плиз extension который autocompleting css ты используешь vscode :)
Подскажите какой плагин для форматирования используется либо какой язык выбран в форматировании
prettier скорее всего
Здравствуйте, Максим🙌 Можно связаться с Вами в соцсетях? Спасибо 👍
Привет.
Как сейчас ай ти сфера в Швеции?
Сколько в среднем может получить тестировщик в год?
Что у тебя за темя в vs code
Уважаемый автор видео, обнови его пожалуйста. Твой код устарел безнадежно. Для кастомизации сейчас нужно использовать Controller.
Привет!спасибо за видео
Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется
Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)
Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов
Ни как не могу победить чекбокс есть/нет телефон для актуальной версии react-hook-form как исправить код в видео?
В FormControlLabel ваш control должен выглядеть следующим образом:
_control={}_
изначально на показе страницы, 1:14 вроде маска +1 вводилась автоматом, только ради этого смотрел видео на перемотке, а в итоге про маску ни слово
Спасибо! Видео было полезным.
Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится
любой state manager решит твою проблему
Какая тема у тебя?
Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?
Наверное уже не актуально) напишу для тех кто будет читать - можно использовать onChange
В компоненте PrimaryButton ошибочка c rest параметрами -> надо вот так export const PrimaryButton = ({children, ...props}) =>{}
За 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 никто заливать не собирался, это ведь туториал, причем очень хороший. твои доработки это лишь дело техники.
Чел ну вернись, правда
Не ну ты вернись
Устрели библиотеки. Нужно все перебирать, переустанавливать.
У меня вообще не работает чекбокс и контролер формы. Есть кто с 2023?
Максим, привет! А можно ссылочку на репозиторий с сервером?
с тайпскриптом заняло бы 2 часа)
Зачем ты меня вводишь)
FileInput очень сложный для понимания. Такие макароны....
по факту, если разобраться, в создании отдельных компонентов по типу (Form, Input и тп) только ради стилей нету необходимости. просто используйте styled-components или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо
26:50 /[a-z]/i/ Вроде так можно
Кабину проще
Очень много лишних библиотек, для новичков ничего не понятно
ПОЛ ВИДОСА НЕ ПО ТЕМЕ БЛЯТЬ И ТАЙМКОДОВ ДАЖЕ НЕТ - ЖИРНЫЙ ДИЗЛАЙК!!!
видео 2020 года если что, автор давно забыл про канал, а в то время таймкодов даже не было
Самый плохой курс, который я когда нибудь видел. Если сами не знаете, почему снимать курсы. Дизлайк.