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();
// ...
Parámetros
createRef
no recibe parámetros.
Devuelve
createRef
devuelve un objeto con una única propiedad:
current
: Inicialmente, se inicializa ennull
. Posteriormente, se puede asignar a cualquier otra cosa. Si pasas el objeto ref a React como un atributoref
de un nodo JSX, React asignará su propiedadcurrent
.
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 aconst [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> </> ); } }
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> </> ); }