Как использовать ref в кастомной форме для скрола к элементу?
Привет!
Есть самописная форма на реакте, с ~20 полями (инпуты, селекты, текст арии и т.п.).
Есть задача при получении ошибки на каком-либо из полей, скролить пользователя к самому первому на котором есть ошибка.
Для себя нашел только такое решение в лоб:
Всем элементам в форме задать порядковый номер исходя из расположения в форме, и для каждого элемента создать реф.
При валидации формы определить наименьший порядковый номер элемента с ошибкой и проскролить к его рефу.
Уж очень жирно выходит столько рефов создавать
Можно ли как-то динамически использовать react ref для решения этой задачи?
Подскажите какие есть варианты решения?
С рефами действительно очень жирно получится.
Советую просто считывать offsetTop первого элемента с ошибкой и отправлять скролл, через scrollTop к нему.
Порой нативные решения с чистым js бывают более эффективными, чем с использованием react экосистемы.
И то, что касается скроллов именно тот случай.
мне кажется такое решение не сильно отличается от решения через ref, разве нет?
Реф это же ссылка на дом элемент, с предложенным вариантом выйдет похожий результат, нужно будет собрать сначала все элементы, а после получения ошибок, определить самый верхний и сделать к нему скролл.
Мой вопрос скорее не про ресурсоемкость решения, а про выборку этих самих элементов.
Тогда не очень понимаю в чем ваша проблема?
Вместо динамического создания элементов заранее создайте список из готовых элементов, и уже далее также ими управляйте.
Ну забинди ref на контейнер, который прокручивается, при ошибках работай с ссылкой и стандартными средствами выбери первый элемент, определи позицию, и проскроль нужный контейнер.
Простой
