Las referencias de React son una forma de acceder a los elementos del DOM que han sido creados en el metodo render(), puesto que React utiliza un virtual DOM, utilizar métodos como getElementById() o querySelectorAll() para referenciar elementos no son la mejor forma de trabajar y nos pueden dar problemas.
La forma de crear estas referencias es la siguiente:
class App extends Component {
constructor() {
super()
this.title = React.createRef()
}
render() {
return (
<div className="App">
<h1 ref = { this.title }>Hola comunidad</h1>
</div>
);
}
}
Lo que estamos haciendo es crear una referencia que llamaremos title en el constructor de nuestro componente App con la función createRef() de React,después en un h1 dentro del método render() le asignamos al atributo ref la referencia previamente creada en el constructor, de esta manera enlazamos este nodo del DOM a nuestra referencia.
Ahora lo que haremos sera cambiar el color de este h1 al presionar un botón utilizando la referencia.
<button onClick = { this.changeColor }>Cambiar color</button>
changeColor() {
console.log(this.title)
}
En este método primero que todo mostramos por consola la referencia la cual se verá algo así:
Como podemos ver la referencia es un objeto en el cual su propiedad current representa al nodo.
Cambiar el color del elemento es tan sencillo cómo esto
this.title.current.style.color = 'tomato'
Accedemos a la propiedad current de la referencia title, y cómo está propiedad es un elemento HTML podemos acceder a sus diversos métodos y propiedades, y de esta manera cambiamos el color de este elemento. El código completo de este componente es el siguiente
class App extends Component {
constructor() {
super()
this.title = React.createRef()
this.changeColor = this.changeColor.bind( this )
}
changeColor() {
console.log(this.title)
this.title.current.style.color = 'tomato'
}
render() {
return (
<div className="App">
<h1 ref = { this.title }>Hola comunidad</h1>
<button onClick = { this.changeColor }>Cambiar color</button>
</div>
);
}
}
Cuando usar estas referencias
Según la propia documentación de React se recomienda usar las referencias en las siguientes situaciones:
- Manejo de de inputs, seleccion de texto
- Manejo de animaciones
- Integración con otras librerias que manipulen el DOM
Espero que les haya gustado y por supuesto para más información los invito a revisar la documentación de React.
Recuerda que en EDteam tenemos un excelente curso de React para que aprendas esta maravillosa tecnología.
Hasta la próxima