Какие есть способы программной установки фокуса на элемент в React?

Введение в управление фокусом в React

Управление фокусом — важная часть создания доступных и интерактивных интерфейсов. В React фокус не управляется автоматически, поэтому разработчику нужно явно указывать, какой элемент должен получить фокус. Это особенно важно для модальных окон, форм и навигации с клавиатуры.

Основные способы установки фокуса

Первый и самый простой способ — использовать атрибут autoFocus. Он работает только при монтировании компонента и устанавливает фокус на элемент сразу после рендера. Однако он не подходит для динамического управления фокусом, например, при открытии модального окна.

Более гибкий способ — использование рефов. В классовых компонентах создается реф через React.createRef(), а в функциональных — через useRef(). Реф позволяет получить доступ к DOM-элементу и вызвать его метод focus().

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} />;
}

В этом примере фокус устанавливается после монтирования компонента благодаря useEffect с пустым массивом зависимостей.

Динамическое управление фокусом

Для установки фокуса в ответ на действия пользователя, например, при клике на кнопку, можно использовать обработчики событий. Реф создается заранее, а фокус вызывается в нужный момент.

function Form() {
  const nameRef = useRef(null);

  const handleClick = () => {
    nameRef.current.focus();
  };

  return (
    <div>
      <input ref={nameRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

Callback refs и библиотеки

Иногда нужно выполнить дополнительные действия при привязке рефа. Для этого используются callback refs — функции, которые получают DOM-элемент или null. Это позволяет, например, автоматически фокусировать элемент при его появлении.

<input ref={(node) => { if (node) node.focus(); }} />

Для сложных сценариев, таких как управление фокусом в модальных окнах или предотвращение ухода фокуса, существуют библиотеки, например, react-focus-lock или focus-trap-react. Они обеспечивают корректное поведение фокуса в соответствии с требованиями доступности.

Вывод

Управление фокусом в React требует явного использования рефов и методов DOM. Для простых случаев достаточно autoFocus или useRef с useEffect. Для динамических сценариев и обеспечения доступности применяйте callback refs или специализированные библиотеки. Это улучшает пользовательский опыт и соответствует стандартам WCAG.