Neste artigo você vai aprender a como dar foco em input depois do carregamento em React, de uma forma super simples
Fala programador(a), beleza? Bora aprender mais sobre formulários, inputs e React!
Temos um atributo especial para o React.js que resolve este problema de forma eficaz
Que é o autoFocus, note o F maiúsculo, ele é necessário
Basta colocá-lo no input que queremos gerar o evento de focus depois do carregamento da página
Veja um exemplo completo:
<input type="text" autoFocus placeholder="Digite seu nome" />
Desta forma teremos o input sendo acessado logo no começo, com o usuário podendo digitar e colocar o dado necessário
Isso é interessante para direcionar o usuário, e ele conseguir se encontrar já no inicío
Obs: O atributo se colocar sem o f maiúsculo não vai funcionar!
Isso acontece pois alguns recursos do JavaScript possuem nomes parecidos, então o React substitui para algumas variações dos mesmos
Isso faz com que ele execute as lógicas do React e não a lógica padrão do recurso, que pode acarretar em mal funcionamento
Conclusão
Neste artigo você aprendeu a como ativar foco em input depois do carregamento em React
Desta maneira o usuário vê que um input já está pronto para receber dados
Isso é importante pois melhora a experiência dos usuários
O nome do atributo utilizado é autoFocus
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!