Neste artigo você vai aprender a como acessar elemento de DOM em React JS, ou seja, uma ação equivalente aos métodos de JavaScript puro
Fala programador(a), beleza? Bora aprender a trabalhar com DOM em React JS!
Para acessar um elemento em React como se estivesse em JavaScript vanilla com métodos como querySelector, você vai precisar de um hook
O hook em questão é o useRef, que vai criar uma referência do elemento alvo
E assim você pode acessá-lo sem problemas! 🙂
Veja um exemplo prático:
import { useRef } from "react";
Primeiramente faça a importação do hook
const myElement = useRef(null);
Dentro do componente defina uma nova variável com o useRef, isso inicializa o hook
<div ref={myElement}>Element com ref</div>
Agora defina o atributo ref com o nome da variável que você criou anteriormente, e pronto
O seu elemento já está referenciado e pode ser acessado no componente
Você vai acessar o elemento da seguinte forma:
console.log(myElement.current)
Aqui utilizei um console.log para você ver o que há no elemento
Mas basta acessar a sua variável com a propriedade current
Deixe um comentário contando o que achou deste artigo 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
No artigo de hoje você viu como acessar elemento de DOM em React
Utilizamos o hook useRef, que cria uma referência com um elemento do DOM
Você pode inicializar o hook quantas vezes precisar, ou seja, ter vários elementos selecionados
Lembre-se de importá-lo e também acessar o elemento pela propriedade current
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!