Forward Ref
Manejando referencias al DOM utilizando la propiedad ref de React
Introducción
Cuando usamos el hook useRef nos permite de una manera fácil poder mantener la referencia a un elemento del DOM (por ejemplo un input o un select), y poder cambiar propiedades del mismo como por ejemplo asignarle el foco a ese elemento o cualquier otra.
Esto está genial si la referencia la tenemos dentro del mismo componente, pero ¿y si quisieramos pasar esa referencia desde el componente padre? Las ForwardRef nos pueden ser de gran ayuda.
Temario
ForwardRef
En este ejemplo vamos a crearnos un componente que vamos a llamar InputComponent en el que vamos a envolver un elemento (HTML) input.
Tenemos un requerimiento: cuando el usuario pulsa en un botón que se encuentra fuera del componente queremos darle el foco al elemento input interno de nuestro InputComponent.
Aquí tenemos un desafío, podemos tener un ref al input dentro de nuestro InputComponent, pero... nosotros queremos manejar esa referencia desde el componente padre, ¿qué podemos hacer? ForwardRef al rescate.
¿Te apuntas a nuestro máster?
Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.