Как управлять фокусом с помощью хука useRef?

Question

Хук useRef используется для получения доступа к DOM-элементам в React. Вы можете создать реф с помощью useRef, а затем присвоить его элементу через атрибут ref. Это позволяет вам управлять фокусом, используя методы, такие как focus() для установки фокуса на элемент, например, при загрузке компонента или по событию, как нажатие кнопки.

YeaHub · Accepted Answer

Хук useRef в React предоставляет способ взаимодействия с DOM-элементами, позволяя сохранять ссылку на элемент между рендерами без перерисовки компонента. Это особенно полезно для управления фокусом на элементах, что важно для улучшения доступности и взаимодействия с пользователем.Пример использования useRef для управления фокусом на текстовом поле:import React, { useRef } from 'react'; function FocusInput() { const inputRef = useRef(null); // Создаем реф const handleFocus = () => { inputRef.current.focus(); // Устанавливаем фокус на элемент }; return (

); }В этом примере мы создаем реф с помощью useRef, затем присваиваем его текстовому полю с помощью атрибута ref. При нажатии на кнопку Установить фокус вызывается функция handleFocus, которая устанавливает фокус на текстовое поле.Вы можете использовать useRef для управления фокусом не только на текстовых полях, но и на других элементах, таких как кнопки или контейнеры. Это делает useRef мощным инструментом для создания интерактивных и доступных интерфейсов.