React

Como dar foco em input depois do carregamento em React

30 de agosto de 2021

Como dar foco em input depois do carregamento em React

Neste artigo você vai aprender a como dar foco em input depois do carregamento em React, de uma forma super simples

foco em input depois do carregamento em React capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x