Как использовать ref в кастомной форме для скрола к элементу?

Привет!

Есть самописная форма на реакте, с ~20 полями (инпуты, селекты, текст арии и т.п.).
Есть задача при получении ошибки на каком-либо из полей, скролить пользователя к самому первому на котором есть ошибка.

Для себя нашел только такое решение в лоб:
Всем элементам в форме задать порядковый номер исходя из расположения в форме, и для каждого элемента создать реф.
При валидации формы определить наименьший порядковый номер элемента с ошибкой и проскролить к его рефу.

Уж очень жирно выходит столько рефов создавать
Можно ли как-то динамически использовать react ref для решения этой задачи?
Подскажите какие есть варианты решения?
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
GreyCrew
@GreyCrew
Full-stack developer
С рефами действительно очень жирно получится.
Советую просто считывать offsetTop первого элемента с ошибкой и отправлять скролл, через scrollTop к нему.
Порой нативные решения с чистым js бывают более эффективными, чем с использованием react экосистемы.
И то, что касается скроллов именно тот случай.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Ну забинди ref на контейнер, который прокручивается, при ошибках работай с ссылкой и стандартными средствами выбери первый элемент, определи позицию, и проскроль нужный контейнер.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы