React Refs

React admite una propiedad muy especialRef, que puedes usar para enlazar a cualquier componente generado por render().

Esta propiedad especial te permite hacer referencia a la instancia de respaldo (backing instance) correspondiente devuelta por render(), lo que garantiza que siempre obtengas la instancia correcta en cualquier momento.

En React, los Refs (referencias) proporcionan una forma de acceder a elementos DOM o instancias de componentes. El uso de Refs permite manipular directamente elementos DOM u obtener instancias de componentes hijos, y es adecuado para escenarios como el manejo del foco, la selección de texto, la reproducción de medios, la activación de animaciones forzadas o la integración de bibliotecas DOM de terceros.

Método de uso

Usa React.createRef o useRef para crear y acceder a las refs.

React.createRef se usa normalmente en componentes de clase, mientras que useRef es un Hook que se usa normalmente en componentes de función.

Además, enlazar this en los manejadores de eventos también se puede lograr con la sintaxis de propiedades de clase para evitar crear una nueva función en cada renderizado.

  • Crear la Ref: en el constructor del componente de clase, usaReact.createRefCrea un objeto ref y asígnalo a una propiedad de la instancia del componente.
  • Enlazar la Ref: enrenderEn el método, enlaza el objeto ref al elemento DOM que necesita ser referenciado.
  • Acceder a la Ref: a través dethis.myInputRef.currentaccede al elemento DOM enlazado y puedes manipular las propiedades y métodos de dicho elemento.

Ejemplo completo

Puedes usar this para obtener el componente React actual, o usar ref para obtener la referencia del componente, como en el siguiente ejemplo:

Ejemplo de React

class MyComponent extends React.Component { constructor(props) { super(props); this.myInputRef = React.createRef(); } handleClick = () => { //Usar la API DOM nativa para obtener el foco this.myInputRef.current.focus(); } render() { return ( <div> <input type="text" ref={this.myInputRef} /> <input type="button" value="Haz clic en mí para enfocar el campo de entrada" onClick={this.handleClick} /> </div> ); } }

Pruébalo »

En el ejemplo, obtenemos una referencia a la instancia de respaldo del campo de entrada; después de hacer clic en el botón, el campo de entrada obtiene el foco.

También podemos usar el método getDOMNode() para obtener el elemento DOM

Crear Refs

React proporciona el método React.createRef para crear refs.

Ejemplo

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Renderiza el componente MyComponent
root.render(<MyComponent />);

Refs de callback

Otra forma de crear refs es mediante funciones de devolución de llamada. Este enfoque era muy común antes de React 16.3; ahora se recomienda usar React.createRef.

Ejemplo

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    if (this.myRef) {
      this.myRef.focus();
    }
  }

  render() {
    return <input type="text" ref={this.setMyRef} />;
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Renderiza el componente MyComponent
root.render(<MyComponent />);

Usar Refs para acceder a elementos DOM

A través de las Refs puedes acceder y manipular directamente los elementos DOM.

Ejemplo

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleClick = () => {
    this.myRef.current.style.backgroundColor = 'yellow';
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.myRef} />
        <button onClick={this.handleClick}>Change Background</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Renderiza el componente MyComponent
root.render(<MyComponent />);

Usar Refs para acceder a instancias de componentes hijos

Las Refs también se pueden usar para acceder a los métodos o propiedades de instancia de un componente hijo.

Ejemplo

class ChildComponent extends React.Component {
  focusInput = () => {
    this.inputRef.current.focus();
  };

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    this.childRef.current.focusInput();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Focus Child Input</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Renderiza el componente MyComponent
root.render(<MyComponent />);

Usar el Hook useRef (componentes de función)

En los componentes de función, se puede usar el Hook useRef para crear refs.

Ejemplo

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
// Renderiza el componente MyComponent
root.render(<MyComponent />);

Resumen

  • Crear Refs: en componentes de clase, usaReact.createRef, en componentes de función, usauseRef Hook.
  • Acceder a elementos DOM: accede y manipula directamente los elementos DOM a través de las refs.
  • Acceder a la instancia de un componente hijo: accede a los métodos o propiedades de instancia de un componente hijo a través de las refs.
  • Personalizar los valores de instancia expuestos: usauseImperativeHandleyforwardRefPersonaliza los valores de instancia que el componente hijo expone al componente padre.
  • Refs en el modo concurrente: Las Refs siguen funcionando correctamente en el modo concurrente, y se pueden usar junto conuseTransitiony otros Hooks relacionados con el modo concurrente.
Otras lecturas