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.

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.