Focando um campo de entrada no React pós-renderização

No React, definir o foco em um campo de entrada após a renderização pode ser alcançado através de vários métodos .

Uma abordagem é utilizar referências conforme sugerido na documentação. Ao atribuir uma referência ao campo de entrada dentro da função de renderização (por exemplo, "nameInput"), você pode acessar seu nó DOM e invocar manualmente o método focus. No entanto, é crucial entender onde e quando chamar essa função.

Chamando a função Focus

O local mais direto para chamar a função focus é o método de ciclo de vida componentDidMount do componente . Isso garante que o foco seja definido após o componente ter sido montado no DOM. O código ficaria assim:

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

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

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

  return (
    
  );
};

export default MyComponent;

Autofocus Option

Como alternativa, você pode utilizar o suporte autoFocus fornecido pelo React. Ao definir esta propriedade como true no campo de entrada, o componente ganhará foco automaticamente na montagem.

return (
  
);

Observe que, em JSX, a propriedade é autoFocus (com F maiúsculo), ao contrário do atributo HTML que não diferencia maiúsculas de minúsculas.