Como dar foco em input no React JS

Neste artigo você aprenderá a como dar foco em input no React JS, através de abordagens simples e fáceis de aplicar no seu projeto!

Fala programador(a), beleza? Bora aprender mais sobre React!

React JS é uma das bibliotecas JavaScript mais populares para criar interfaces de usuário interativas.

Uma das funcionalidades que muitos desenvolvedores buscam é a capacidade de controlar o foco dos elementos de entrada (inputs) de um formulário.

Isso é particularmente útil para melhorar a experiência do usuário, permitindo que eles interajam com as interfaces de forma mais eficiente.

Neste artigo, vamos ver como dar foco a um elemento de entrada (input) no React JS.

O Básico: Refs e a função focus()

No React, a forma mais direta de dar foco a um campo de entrada é utilizando “refs”.

Refs permitem que você acesse e interaja com os nós do DOM diretamente. Aqui está um exemplo simples:

import React, { useRef } from "react";

function MyComponent() {
  const myRef = useRef(null);

  function handleButtonClick() {
    // Dá foco ao input
    myRef.current.focus();
  }

  return (
    <div>
      <input ref={myRef} type="text" />
      <button onClick={handleButtonClick}>Focar no input</button>
    </div>
  );
}

export default MyComponent;

Neste exemplo, a função useRef do React é usada para criar uma ref, que é então atribuída ao elemento de entrada.

Quando o botão é clicado, a função handleButtonClick é chamada, e a função focus é chamada na ref, dando foco ao elemento de entrada.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Usando o Hook useEffect

Outra abordagem comum para dar foco a um campo de entrada é usar o hook useEffect.

Isso é especialmente útil quando você deseja dar foco a um campo assim que o componente é montado:

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

function MyComponent() {
  const myRef = useRef(null);

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

  return (
    <div>
      <input ref={myRef} type="text" />
    </div>
  );
}

export default MyComponent;

Neste exemplo, a ref é criada exatamente da mesma forma.

No entanto, a função focus é chamada dentro de um useEffect hook.

Isso faz com que o campo de entrada receba foco assim que o componente é montado.

Trabalhando com Múltiplos Inputs

E se tivermos vários campos de entrada e quisermos controlar qual deles tem foco? Podemos fazer isso criando uma ref para cada campo de entrada:

import React, { useRef } from "react";

function MyComponent() {
  const firstInputRef = useRef(null);
  const secondInputRef = useRef(null);

  function handleButtonClick() {
    // Dá foco ao segundo input
    secondInputRef.current.focus();
  }

  return (
    <div>
      <input ref={firstInputRef} type="text" />
      <input ref={secondInputRef} type="text" />
      <button onClick={handleButtonClick}>Focar no segundo input</button>
    </div>
  );
}

export default MyComponent;

A importância de gerenciar o foco no desenvolvimento de aplicações acessíveis

Gerenciar o foco do elemento de entrada não é apenas uma questão de melhorar a experiência do usuário – também é crucial para tornar sua aplicação acessível a todos os usuários.

A capacidade de navegar usando apenas o teclado é uma exigência para muitos usuários, especialmente aqueles com deficiências motoras que impedem o uso de um mouse.

O React facilita o gerenciamento do foco de maneira programática, o que nos permite criar experiências inclusivas para todos.

Ao dar foco a elementos de entrada relevantes, você pode guiar os usuários por sua aplicação da maneira mais intuitiva possível.

Adicionando animação ao foco

Melhorar a experiência do usuário é sempre o objetivo ao desenvolver interfaces de usuário. Uma das maneiras de conseguir isso é adicionar animações sutis ao foco do elemento.

Isso pode ser feito com CSS. Aqui está um exemplo de como você pode adicionar uma borda colorida ao elemento quando ele recebe o foco:

input:focus {
  outline: none;
  border: 1px solid #4A90E2;
  box-shadow: 0 0 5px #4A90E2;
}

Debugando problemas com foco

Embora dar foco a um campo de entrada com React seja bastante direto, as coisas podem ficar complicadas em aplicações grandes e complexas.

Se você estiver enfrentando problemas com o gerenciamento de foco, as Ferramentas de Desenvolvedor do navegador podem ser úteis.

Você pode inspecionar elementos para ver qual tem foco atualmente e usar a consola para chamar a função document.activeElement para ver qual elemento tem o foco.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

O Hook useState é uma ferramenta poderosa para gerenciar o estado em componentes funcionais do React.

Ele oferece flexibilidade para trabalhar com vários tipos de dados e fornece um método fácil de manipular e renderizar dados de estado em sua aplicação.

Lembre-se sempre de não alterar o estado diretamente e usar a função de atualização de estado para garantir que o React possa acompanhar as mudanças e renderizar a interface do usuário de acordo.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Resposta rápida: pra dar foco em um input no React você cria uma ref com useRef, liga ela no input com ref={minhaRef} e chama minhaRef.current.focus() quando quiser

Se o foco tem que acontecer assim que a tela abre, você joga esse focus() dentro de um useEffect

Se é só quando a página carrega e nada mais, dá pra usar o atributo autoFocus direto no input, sem ref nenhuma

Abaixo tem cada um desses casos explicado com código, bora?

O jeito mais simples de todos: atributo autoFocus

Nem sempre você precisa de ref pra focar um campo

Se a ideia é só dar foco automático quando a tela abre, o React tem o atributo autoFocus pronto

É tipo o next, next e finish da vida: você só coloca no input e acabou

function MyComponent() { return ( <div> <input type="text" autoFocus /> </div> ); }

Repara que o A é maiúsculo (autoFocus), porque no React os atributos são em camelCase, diferente do HTML puro

Quando usar? Quando você quer o foco só na montagem do componente e não precisa mexer no campo depois

Precisou controlar o foco por clique de botão, ou focar de novo em outro momento? Aí volta pra ref com focus(), que te dá esse controle

Focar no próximo input ao apertar Enter

Esse é um caso super comum em formulários: o usuário digita, aperta Enter e o foco pula pro próximo campo, sem precisar do mouse

A lógica é a mesma dos múltiplos inputs: uma ref pra cada campo, e no evento de tecla você chama o focus() do próximo

function MyComponent() { const segundoInputRef = useRef(null);

function handleKeyDown(event) { if (event.key === "Enter") { segundoInputRef.current.focus(); } }

return ( <div> <input type="text" onKeyDown={handleKeyDown} /> <input ref={segundoInputRef} type="text" /> </div> ); }

Aqui a gente escuta o onKeyDown do primeiro campo

Quando a tecla for Enter, o foco vai direto pro segundo

Em formulários maiores dá pra montar um array de refs e ir passando o foco de um pro outro na sequência, mas o princípio é esse

Perguntas frequentes

Preciso mesmo de useRef pra dar foco?

Não sempre

Pra foco automático na montagem, o atributo autoFocus resolve sozinho

Agora, se você quer disparar o foco por um clique, por uma tecla ou em outro momento qualquer, aí sim o useRef com focus() é o caminho, porque ele te dá o controle de QUANDO focar

Por que myRef.current está null quando tento focar?

Quase sempre é timing: você chamou focus() antes do elemento existir no DOM

Se você precisa focar assim que o componente monta, coloque o focus() dentro de um useEffect, e não solto no corpo do componente

Já me ferrei com isso: chamar focus() direto na renderização não funciona porque a ref ainda não apontou pro input

Como saber qual elemento está com o foco agora?

Abre as Ferramentas de Desenvolvedor do navegador e roda document.activeElement no console

Ele te devolve exatamente o elemento que está focado naquele momento, ótimo pra debugar formulário grande