Вопрос с собеседования · Frontend

Как получить доступ к DOM-элементу через useRef?

JuniorReact
Ещё спрашивают так:
  • Как поставить фокус на поле ввода в React?
Коротко

const inputRef = useRef<HTMLInputElement>(null) и <input ref={inputRef}/> — после монтирования в inputRef.current будет DOM-элемент. Использовать его можно в обработчиках и эффектах (фокус, прокрутка, измерение размеров, воспроизведение видео), но не во время рендера: в этот момент элемента может ещё не быть. Ref нужен там, где React не даёт декларативного способа.

  • inputRef.current?.focus() — опциональная цепочка на случай null
  • Прокрутка: element.scrollIntoView()
  • Не менять через ref то, чем управляет React (текст, классы)

А ещё autoFocus в JSX — проще, если нужен фокус только при монтировании

Подробно

function Search() {
  const ref = useRef<HTMLInputElement>(null);
  return (<>
    <input ref={ref} />
    <button onClick={() => ref.current?.focus()}>Искать</button>
  </>);
}

Что хотят услышать

  • useRef и атрибут ref.
  • Использование в обработчиках и эффектах.
  • Не читать ref при рендере.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗ref.current заполнен уже во время первого рендера, до вставки в DOM
  • ✓Атрибут ref кладёт DOM-элемент в ref.current после монтирования
  • ✗Через ref правильно менять текст элементов вместо хранения в state
  • ✗useRef работает только в классовых компонентах, а в функциях — createRef

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования