Referencias (Ref)

Los Refs o referencias, son la forma que tiene React para hacer referencia a un elemento de forma rápida, muy parecido a realizar una búsqueda por medio del método getElementById de JavaScript. Mediante los Ref, es posible agregarles un identificador único a los elementos para después accederlos fácilmente.

Regresemos al ejemplo del formulario de registro de empleados. Cuando la pantalla carga, no hay ningún campo con el foco, por lo que queremos que cuando inicie la página, el campo del nombre de empleado obtenga el foco. Veamos cómo quedaría:

1import React from 'react'
2import Image from 'next/image'
3
4class EmployeeForm extends React.Component{
5
6    constructor(){
7    super(...arguments)
8        this.state = {
9            firstName: "",
10            lastName: "",
11            age: ""
12        }
13    }
14
15    componentDidMount(){
16        this.firstName.focus()
17    }
18
19    handleChanges(e){
20        let newState = Object.assign(
21        this.state, {[e.target.id]: e.target.value})
22        this.setState(newState)
23    }
24
25    saveEmployee(e){
26        this.props.save(this.state)
27    }
28
29    render(){
30        return (
31            <form>
32                <label htmlFor='firstName'>Nombre</label>
33                <input ref={self => this.firstName = self} id='firstName'
34                    type='text' value={this.state.firstName}
35                    onChange={this.handleChanges.bind(this)} />
36                <br />
37                <label htmlFor='lastName'>Apellido</label>
38                <input id='lastName' type='text' value={this.state.lastName}
39                    onChange={this.handleChanges.bind(this)} />
40                <br />
41                <label htmlFor='age'>Edad</label>
42                <input id='age' type='number' value={this.state.age}
43                    onChange={this.handleChanges.bind(this)} />
44                <br />
45                <button onClick={this.saveEmployee.bind(this)}>Guardar</button>
46            </form>
47        )
48    }
49}
50export default EmployeeForm

Veamos que al campo firstName le hemos agregado el atributo ref (línea 32), el cual sirve para establecer la referencia al elemento, lo segundo importante es la línea 14, pues declaramos el método componentDidMount, este método no tiene un nombre al azar, si no que corresponde con uno de los métodos del ciclo de vida de React, por lo que el método se ejecuta de forma automática cuando el componente es mostrado en pantalla. Más adelante analizaremos el ciclo de vida de un componente, pero por ahora, esta breve explicación deberá ser suficiente.

Cuando el método componentDidMount se ejecuta, obtiene la referencia al campo productName mediante la instrucción this.firstName y le establece el foco (línea 15).

Por si no te quedo claro que está pasando en la línea 32, te explico, lo que estamos haciendo con self = this.firstName = self, es definir un Arrow function, la cual recibe como parámetro la variable self. Cuando React llame esta arrow function, le mandará como parámetro el elemento que queremos referenciar, es decir, al mismo elemento (de allí el nombre de la variable self), luego en el cuerpo de la función, definimos que this.firtName = self, con esto, estamos creado un variable a nivel de clase llamada firtName y como valor tendrá self. Finalmente, cuando en la línea 15 queremos recuperar el elemento, nos vamos sobre la variable de clase this.firtName la cual ya tiene la referencia directa al elemento.

Referencias con String

En las primeras versiones de React, las referencias se creaban mediante String, es decir, en lugar de hacer el arrow Function, definíamos directamente el nombre de la referencia, por ejemplo ref=”firtName” y luego para recuperar una referencia se utilizaba la expresión this.refs.xxx, donde xxx correspondía al nombre de la referencia, en este caso, this.refs.firtName, sin embargo, este método ha quedado desaconsejado por el mismo equipo de React, el cual indica que es posible que termine desapareciendo en el futuro.

Puedes leer más sobre esté método de creación de referencias desde la página oficial de React, sin embargo, yo solo lo menciono a modo de anécdota, ya que es funcionalidad que no deberíamos de utilizar más.

Referencias con Hooks

Los hooks es uno de los últimos features que se agregaron a React, los cuales permiten potenciar los componentes sin estado o de función, sin embargo, hemos decidido explicar todo lo referente a los hooks en la unidad 13, donde explicaremos todo con detalle. Dicho lo anterior, cuando trabajo con Hooks las referencias se utilizan de otra forma, pero las analizaremos cuando llegues a esa unidad.

Alcance los Refs

Las Refs por medio de String (ref=”firtName” (desaconsejadas) ) tiene un alcance global en un proyecto y pueden ser accedidos desde cualquier componente sin importar su posición en la jerarquía, por lo que es común utilizarse para hacer referencia a elementos globales de una aplicación u elementos que pueden ser afectados desde diversos puntos de la aplicación.

Por otro lado, las referencia mediante arrow function solo podrán ser accedidas si tenemos la referencia a la variable a la cual se asignó el elemento, en otro palabras, this.firtName solo podrá ser accedida por los elementos a los que se las pase explícitamente esa referencia.

Utilizar referencias con prudencia

Las referencias son una excelente herramienta si se utilizan con delicadeza. Ya que abusar en el uso de referencias, puede hacer nuestra aplicación muy complicada, pues desde donde sea podría afectar nuestros componentes si tener una referencia clara de quien los está afectando.

Referencias (Ref)

Referencias con String

Referencias con Hooks

Alcance los Refs

Acerca de este libro