Atención

createRef se usa principalmente para componentes de clase. Los componentes de función generalmente usan useRef en su lugar.

createRef crea un objeto ref que puede contener un valor arbitrario.

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

Referencia

createRef()

Invoca a createRef para declarar una ref dentro de un componente de clase.

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

Ver más ejemplos a continuación.

Parámetros

createRef no recibe parámetros.

Retorna

createRef retorna un objeto con una única propiedad:

  • current: Inicialmente, se inicializa en null. Posteriormente, se puede asignar a cualquier otra cosa. Si pasas el objeto ref a React como un atributo ref de un nodo JSX, React asignará su propiedad current.

Advertencias

  • createRef siempre devuelve un objeto diferente. Es equivalente a escribir { current: null } manualmente.
  • En un componente de función, probablemente querrás usar useRef en su lugar, que siempre devuelve el mismo objeto.
  • const ref = useRef() es equivalente a const [ref, _] = useState(() => createRef(null)).

Uso

Declarar una referencia en un componente de clase

Para declarar una referencia ref dentro de un componente de clase, invoca a createRef y asigna el resultado a un campo de clase:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Si ahora pasas ref={this.inputRef} a un <input> en tu JSX, React llenará this.inputRef.current con el nodo del DOM del input. Por ejemplo, así es como puedes crear un botón que enfoca el input:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

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

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Enfoca el input
        </button>
      </>
    );
  }
}

Atención

createRef se usa principalmente para componentes de clase. Los componentes de función generalmente dependen de useRef en su lugar.

Alternativas

Migrando de una clase con createRef a una función con useRef

Recomendamos utilizar componentes de función en lugar de componentes de clase en código nuevo. Si tienes componentes de clase existentes que utilizan createRef, así es cómo puedes convertirlos. Este es el código original:

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

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

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Enfoca el input
        </button>
      </>
    );
  }
}

Cuando convierta este componente de clase a función, reemplace las invocaciones de createRef con useRef:

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Enfoca el input
      </button>
    </>
  );
}
PreviouscreateFactoryNextisValidElement

How do you like these docs?