Фокусировка поля ввода в пост-рендеринге React

В React установка фокуса на поле ввода после рендеринга может быть достигнута различными методами .

Один из подходов — использовать ссылки, как предложено в документации. Назначив ссылку на поле ввода в функции рендеринга (например, «nameInput»), вы можете получить доступ к его узлу DOM и вручную вызвать метод фокуса. Однако очень важно понимать, где и когда вызывать эту функцию.

Вызов функции фокуса

Самым простым местом для вызова функции фокуса является метод жизненного цикла компонентаComponentDidMount. . Это гарантирует, что фокус будет установлен после того, как компонент будет смонтирован в DOM. Код будет выглядеть так:

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

const MyComponent = () => {
  const nameInputRef = useRef();

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

  return (
    
  );
};

export default MyComponent;

Опция автофокуса

В качестве альтернативы вы можете использовать функцию автофокуса, предоставляемую React. Если установить для этого свойства значение true в поле ввода, компонент автоматически получит фокус при монтаже.

return (
  
);

Обратите внимание, что в JSX это свойство имеет значение autoFocus (с заглавной буквы F), в отличие от атрибута HTML, не чувствительного к регистру.