Установка фокуса на поле ввода после рендеринга в React

Быстрый ответ

Для установки фокуса на элемент ввода в React используйте хуки useEffect() и useRef():

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

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

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

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

Данный код создаёт ссылку с помощью useRef и устанавливает курсор в поле ввода немедленно после рендера компонента при помощи useEffect.

Применение свойства autoFocus

Для статических элементов возможно просто добавить атрибут autoFocus:

function InputWithAutoFocus() {
  return <input autoFocus />;
}

Имейте в виду, что autoFocus активизируется при первой загрузке компонента. Используйте его внимательно, чтобы не нарушать пользовательскую навигацию.

Глубже в управлении фокусом

Овладение управлением фокуса с помощью мощных приёмов

Управление классовыми компонентами через refs

Для классовых компонентов используйте createRef для контроля фокуса:

import React, { Component, createRef } from 'react';

class ClassComponentWithFocus extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus(); // Момент для установки фокуса!
  }

  render() {
    return <input ref={this.inputRef} />;
  }
}

Убедитесь, что ссылка установлена на нужный элемент.

Прямой доступ к DOM через callback-refs

Для установки фокуса на элементе одной строкой воспользуйтесь callback-refs без useRef:

function DirectFocusInput() {
  return <input ref={input => input && input.focus()} />;
}

Сочетание defaultValue и refs в управляемых компонентах

defaultValue и ссылки помогают устанавливать начальные значения без лишнего рендера:

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

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

  return <input ref={inputRef} defaultValue="Initial Value" />;
}

Подробнее об этом расскажет наш спикер на видео

Переходим к динамическому управлению фокусом и повторному использованию

Пользовательские хуки для оптимизации управления фокусом

Пользовательские хуки обеспечат соблюдение принципа DRY и оптимизируют управление фокусом:

import { useEffect, useRef } from 'react';

function useFocus() {
  const elementRef = useRef(null);
  const setFocus = () => { elementRef.current && elementRef.current.focus(); };

  return [elementRef, setFocus];
}

Используйте созданный вами хук для переиспользования логики работы с фокусом в компонентах.

Управление фокусом в ответ на пользовательские события

Иногда фокус необходимо устанавливать в ответ на конкретные пользовательские события:

function InputWithEventFocus() {
  const inputRef = useRef(null);
  const setFocus = () => inputRef.current.focus();

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={setFocus}>Установить фокус на поле ввода</button>
    </div>
  );
}

Данный подход обеспечивает интерактивное управление фокусировкой.

Уход от findDOMNode() в пользу refs

Используйте DOM-узлы напрямую через ссылки, т.к. метод findDOMNode() уже устарел.

Визуализация

Представьте DOM как комнату, где объекты — это элементы. Ваша задача — включить компьютер.

🚪 – Дверь: Вход в комнату
👤 – Вы: JavaScript
🛋️ – Диван: Div
🖼️ – Картина: Span
💡 – Лампа: Paragraph
🖥️ – Письменный стол: Поле ввода

Установка фокуса — это действие наподобие того, как вы направляетесь к компьютеру и включаете его.

До: 🚪👤 ... 🛋️🖼️💡🖥️💤
После: 🚪👤 ... 🛋️🖼️💡🖥️✨

Теперь ваш компьютер (поле ввода) готов к работе.

Полезные материалы

1. HTMLElement: focus() method – Web APIs | MDN – Спецификация метода focus() в JavaScript.
2. $.focus() not working – Stack Overflow – Решение проблем, связанных с focus().
3. Refs and the DOM – React – Лучшие практики работы с фокусом в React.
4. How To Trigger Button Click on Enter – Основы применения клавиатуры для запуска действий.
5. Фокусировка: focus/blur – Подробное изложение о событиях фокусировки и потери фокуса в JavaScript.
6. Reactivity in Depth | Vue.js – Как реактивность в Vue работает при обновлении DOM.
7. Компонент текстового поля React – Material UI – Примеры работы с фокусом в текстовых полях Material-UI.
8. ViewChild – Angular – Основы работы Angular с DOM элементами и управление фокусом.