Как передать фокус через useImperativeHandle в React

Когда кнопка в родителе должна поставить фокус на дочернее поле, передайте дочернему компоненту ref. Через useImperativeHandle можно предоставить родителю один метод focus(). На Mentoring.digital разберём пример, в котором само поле остаётся внутри компонента.

Как устроены две ссылки

Внутренняя ссылка указывает на элемент input. Внешняя ссылка получает объект с методом. Родитель вызывает этот метод после нажатия на кнопку и не зависит от того, как именно дочерний компонент находит поле.

Кнопка фокуса в React 19

В React 19 компонент получает ref как проп. В React 18 и более ранних версиях для передачи такой ссылки функциональному компоненту используется forwardRef.

import { useImperativeHandle, useRef } from "react";

function SearchField({ ref }) {
  const input = useRef(null);
  useImperativeHandle(ref, () => ({
    focus() {
      input.current?.focus();
    },
  }), []);
  return <input ref={input} aria-label="Поиск" />;
}

export default function SearchBox() {
  const field = useRef(null);
  return (
    <>
      <SearchField ref={field} />
      <button onClick={() => field.current?.focus()}>
        Перейти к поиску
      </button>
    </>
  );
}

Когда достаточно пропов

Метод пригоден для фокуса или прокрутки. Состояние, например видимость панели, удобнее описывать пропом и менять через обычный обработчик. Если метод использует изменяемый проп, добавьте его в список зависимостей, чтобы метод получал актуальное значение.

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