Управление фокусом с помощью ссылок на элементы и useEffect
Управляйте фокусом в мире компонентной разработки.
«Управление фокусом с помощью ссылок на элементы и useEffect» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Почему фокусом нужно управлять
Когда элементы интерфейса появляются, исчезают или обновляются, клавиатурный фокус может оказаться не там или исчезнуть. В React Вы целенаправленно управляете им с помощью ссылок и эффектов.
Ссылка указывает на узел DOM
useRef предоставляет стабильный доступ к реальному элементу. После отображения ref.current содержит фактический узел DOM, для которого можно вызвать .focus().
const inputRef = useRef(null);
<input ref={inputRef} />useEffect запускается после отображения
Фокус можно установить только после появления элемента в DOM. useEffect запускается после отрисовки браузером, поэтому это безопасное место для перемещения фокуса.
useEffect(() => {
inputRef.current.focus();
}, []);Установка фокуса при монтировании
Пустой массив зависимостей означает, что эффект запускается один раз при монтировании компонента. Используйте это, чтобы установить фокус на первом поле формы или шага.
Установка фокуса при открытии
Добавьте такую зависимость, как isOpen, чтобы эффект запускался снова при изменении состояния. Когда панель открывается, Вы можете сразу переместить в неё фокус.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Защититесь от null
Ссылка может содержать null, если узел ещё не отображён. Перед вызовом .focus() проверьте наличие ref.current, чтобы избежать сбоя из-за отсутствующего элемента.
ref.current?.focus();Сделайте неинтерактивные элементы доступными для фокуса
Заголовки и div по умолчанию недоступны для фокуса. Добавьте tabindex со значением -1, чтобы скрипт мог установить на них фокус, не добавляя их в обычный порядок перехода по Tab.
<div tabindex="-1" ref={regionRef}>...</div>Восстанавливайте фокус при очистке
Эффект может возвращать функцию очистки. Используйте её, чтобы вернуть фокус на запускающий элемент при размонтировании слоя, чтобы пользователь не оказался в начале страницы.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Остерегайтесь устаревших замыканий
Эффект захватывает значения из своего отображения. Если Вы устанавливаете фокус на основе данных, укажите эти данные в массиве зависимостей, чтобы эффект использовал актуальные, а не устаревшие значения.
forwardRef для дочерних элементов
Чтобы установить фокус на элементе внутри дочернего компонента, оберните его в forwardRef. Тогда родительский компонент будет хранить ссылку на внутренний узел и сможет установить на него фокус.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Не устанавливайте фокус слишком часто
Перемещайте фокус только тогда, когда это действительно помогает пользователю, например при открытии диалогового окна или отображении ошибки. Перехват фокуса при каждом отображении раздражает всех.
Быстрая проверка
Вы хотите переместить клавиатурный фокус на элемент сразу после его отображения React. Где это следует делать?
Итоги: ссылки и эффекты
Сочетайте useRef с useEffect, чтобы перемещать фокус после отображения. Защищайтесь от null, восстанавливайте фокус при очистке и управляйте фокусом только тогда, когда это помогает. 🎯
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 30
- Уроки
- 120
Часто задаваемые вопросы
Урок «Управление фокусом с помощью ссылок на элементы и useEffect» бесплатный?
Да — полный текст урока «Управление фокусом с помощью ссылок на элементы и useEffect» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Управление фокусом с помощью ссылок на элементы и useEffect»?
Управляйте фокусом в мире компонентной разработки. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Управление фокусом с помощью ссылок на элементы и useEffect»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изменение маршрутов без перезагрузки страницы
- Управление фокусом с помощью ссылок на элементы и useEffect
- Фрагменты, порталы и ловушка порядка DOM
- jsx-a11y и защитные правила на уровне компонентов