¿Cómo crear referencias en ReactJS?

Crear referencias en ReactJS es muy simple. Las referencias se utilizan generalmente para los siguientes propósitos:

• Administrar el enfoque, la selección de texto o la reproducción de medios.
• Activación de animaciones imperativas.
• Integración con bibliotecas DOM de terceros.

Nota: debe evitar el uso de referencias para cualquier cosa que se pueda hacer de forma declarativa.

Los siguientes ejemplos se basan solo en componentes funcionales, pero también puede usar componentes de clase.

Método 1 : Usar React.createRef() . Se introdujo en React 16.3.

• Crea una variable ref usando React.createRef()
• Use el atributo ref del elemento para adjuntar la variable ref

Nombre de archivo: App.js

// Importing everything as React
import * as React from "react";
  
const App = () => {
  // Creating textInputRef variable
  const textInputRef = React.createRef();
  
  // This method will be used to focus textInput
  const textInputFocusHandler = () => {
    // Focusing input element
    textInputRef.current.focus();
  };
  
  return (
    <div>
        
      {/** Attaching ref variable using element's ref attribute */}
      <input ref={textInputRef} type="text" 
             placeholder="Enter something" />
  
      {/** Attaching textInputFocusHandler method to button click */}
      <button onClick={textInputFocusHandler}>
             Click me to focus input
      </button>
    </div>
  );
};
  
export default App;

Método 2 : usar el gancho useRef() .

• Crea una variable ref usando React.useRef()
• Use el atributo ref del elemento para adjuntar la variable ref
• El beneficio de usar useRef() sobre createRef() es que es útil para mantener cualquier valor mutable similar a cómo usaría los campos de instancia en las clases.
• useRef() también toma un valor inicial.

Nombre de archivo: App.js

// Importing everything as React
import * as React from "react";
  
const App = () => {
  // Creating textInputRef variable with initialValue "null"
  const textInputRef = React.useRef(null);
  
  // This method will be used to focus textInput
  const textInputFocusHandler = () => {
    // Focusing input element
    textInputRef.current.focus();
  };
  
  return (
    <div>
        
      {/** Attaching ref variable using element's ref attribute */}
      <input ref={textInputRef} type="text" 
             placeholder="Enter something" />
  
      {/** Attaching textInputFocusHandler method to button click */}
      <button onClick={textInputFocusHandler}>
              Click me to focus input
      </button>
    </div>
  );
};
  
export default App;

Método 3 : Usar la referencia de devolución de llamada. Este método se utilizó antes de React 16.3 . Entonces, si está usando React <16.3, use este método.

Crear ref usando este método es un poco diferente a los otros dos métodos. En lugar de pasar un atributo ref creado usando createRef() o useRef() , pasamos una función. La función recibe el elemento React o el elemento HTML DOM como argumento, que se puede utilizar.

Nombre de archivo: App.js

// Importing everything as React
import * as React from "react";
  
const App = () => {
  // Creating and initializing textInputRef variable as null 
  let textInputRef = null;
  
  // Callback function that will set ref for input field
  // Note: It can be used to set ref for any element
  const setTextInputRef = (element) => {
      textInputRef = element;
  };
  
  // This method will be used to focus textInput
  const textInputFocusHandler = () => {
  
    // If textInputRef is not null
    // otherwise it will throw an error
    if (textInputRef) {
      
      // Focusing input element
      textInputRef.focus();
    }
  };
  
  return (
    <div style={{ padding: 16 }}>
      {/** Using setTextInputRef function so that
       *   textInputRef can be set as ref for this input field
       * */}
      <input
        style={{ display: "block" }}
        ref={setTextInputRef}
        type="text"
        placeholder="Enter something"
      />
  
      {/** Attaching textInputFocusHandler 
           method to button click */}
      <button onClick={textInputFocusHandler}>
          Click me to focus input
      </button>
    </div>
  );
};
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida :