Poder hacer referencia de un elemento del DOM o de un componente de clase (class components porque tiene instancia)
📖 Documentación | 🎬 Como usar react refs _ Leo Medina |
- Controlar focus, selección de textos o reproducción de medios
- Integracion con bibliotecas DOM de terceros
El atributo ref es especial y solo se puede usar en componentes de clase y elementos del DOM
"React asignará a la propiedad current el elemento del DOM cuando el componente sea montado, y la asignará de nuevo null cuando sea desmontado. La referencia es actualizada antes de los métodos componentDidMount o componentDidUpdate"
No puedes hacer uso de referencias de componentes de función debido a que no tienen instancias.
- El método createRef devuelve un objeto que en la clave current tiene la referencia al elemento DOM
class CreateRef extends React.Component {
/* Crea una referencia(crea un objeto) para guardar el elemento textInput del DOM */
inputRef = React.createRef();
...- Pasamos la referencia en el atributo ref del elemento que queremos
return (
<>
<input type="text" ref={this.inputRef} />
</>
);- Podemos usar esa referencia en cualquier lugar de la clase y para hacer referencia al elemento DOM debemos acceder a la clave curent
class CreateRef extends React.Component {
//...
handleFocus = () => {
if (this.inputRef) {
console.log("Focus");
/* Estamos accediendo la propiedad "current" para obtener el nodo del DOM */
this.inputRef.current.focus();
}
};
//...
render() {
return (
<>
<h2>
{/* ... */}
<input type="text" ref={this.inputRef} />
<button onClick={this.handleFocus}>Focus</button>
</h2>
</>
);
}
}Podemos hacer un ref a componentes de clase Personalizados y poder hacer uso de sus métodos en el padre.
- En el hijo tenemos el ref y el método que hacen focus
class CustomTextInput extends React.Component {
/* Crea una referencia(crea un objeto) para guardar el elemento textInput del DOM */
inputRef = React.createRef();
handleFocus = () => {
if (this.inputRef) {
console.log("Focus");
/* Estamos accediendo la propiedad "current" para obtener el nodo del DOM */
this.inputRef.current.focus();
}
};
render() {
return (
<>
<h2>
<input type="text" ref={this.inputRef} />
</h2>
</>
);
}
}- Hacemos uso del método handleFocus en el padre para simular un click y que se haga focus al montar el componente
class CreateRefClassComponent extends React.Component {
/* Crea una referencia(crea un objeto) para guardar la instancia del componente de clase la cual nos permitirá acceder a sus métodos*/
autofocusRef = React.createRef();
componentDidMount() {
/* Podemos tener acceso a sus métodos que estan almacenados en la propiedad current */
this.autofocusRef.current.handleFocus();
}
render() {
return (
<>
<CustomTextInput />
<CustomTextInput ref={this.autofocusRef} />
</>
);
}
}React llamara al callback del ref con el elemento del DOM cuando el componente sea montado, y lo llamara con null cuando este se desmonte. Se asegura que las referencias serán actualizadas antes que el componentDidMount o el componentDidUpdate sean ejecutados.
- Pasamos una función al prop ref esta funcion recibirá al elemento como argumento
return (
<>
<input type="text" ref={this.setInputTextRef} />
<button onClick={this.handleFocus}>focus</button>
</>
);- almacenamos el elemento en una propiedad y podemos hacer uso de el en la clase
class CallbackRef extends React.Component {
inputText = null;
/* Esta funcion recibe como parámetro el elemento del DOM y podemos asignarlo a una propiedad*/
setInputTextRef = (element) => {
this.inputText = element;
};
handleFocus = () => {
/* comprobamos que el elemento este montado en el DOM */
if (this.inputText) {
console.log("focus");
this.inputText.focus();
}
};
...
}Se encuentra actualmente deprecado y no se debe de usar
Solo funciona en class components
- Agregamos una prop llamada ref con un string que viene a ser el nombre del ref que usaremos para acceder al elemento
return (
<>
<input type="text" ref="nameRef" />
<button onClick={this.handleFocus}>focus</button>
</>
);- Podemos hacer uso de métodos que existen en el elemento nativo
handleFocus = () => {
console.log("click in focus");
console.log(this.refs.nameRef);
this.refs.nameRef.focus();
};Reenvio de ref es una característica opcional que permite pasar ref entre componentes
Solo funciona para componentes funcionales y a partir de react 16.3
- En el componente padre creamos la ref y la pasamos como parámetro ref al componente funcional hijo
const GrandParent = () => {
/* Creamos la ref */
const nameRef = React.createRef();
return (
<div>
{/* La pasamos al compoennte hijo */}
<CustomComponent ref={nameRef} />
</div>
);
};- Envolvemos el componente hijo(componente funcional) con React.forwardRef el cual recibe una funcion que tiene como segundo parámetro el ref y la asignamos al elemento DOM o componente de clase que queremos referenciar.
const CustomComponent = React.forwardRef((props, ref) => {
return (
<div>
<input type="text" ref={ref} />
</div>
);
});Podemos pasar una prop con un nombre alternativo a ref
- Creamos la ref en el componente padre y la enviamos al hijo como una prop con un nombre diferente a ref
class GrandParent extends React.Component {
constructor(props) {
super(props);
/* Creamos el ref */
this.nameRef = React.createRef();
}
render() {
/* LO enviamos en una prop */
return <Parent inputRef={this.nameRef} />;
}
}- Asignamos la ref que pasamos al elemento o clase en su atributo ref
const CustomComponent = (props) => {
return (
<div>
{/* Asignamos la prop recibida */}
<input type="text" ref={props.inputRef} />
</div>
);
};Podemos pasar una prop con un nombre alternativo a ref
- Creamos el callback en el componente padre y la enviamos al hijo como una prop con un nombre diferente a ref
class GrandParent extends React.Component {
nameRef = null;
callbackRef = (element) => {
this.nameRef = element;
};
render() {
/* LO enviamos en una prop */
return <Parent inputRef={this.callbackRef} />;
}
}- Asignamos la ref que pasamos al elemento o clase en su atributo ref
const CustomComponent = (props) => {
return (
<div>
{/* Asignamos la prop recibida */}
<input type="text" ref={props.inputRef} />
</div>
);
};