Piège

createRef est principalement utilisée pour les composants à base de classes. Les fonctions composants utilisent plutôt useRef.

createRef crée un objet ref qui peut contenir une valeur quelconque.

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

Référence

createRef()

Appelez createRef pour déclarer une ref au sein d’un composant à base de classe.

import { createRef, Component } from 'react';

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

Voir d’autres exemples ci-dessous.

Paramètres

createRef ne prend aucun paramètre.

Valeur renvoyée

createRef renvoie un objet doté d’une unique propriété :

  • current : elle vaut initialement null. Vous pourrez ensuite la modifier. Si vous passez l’objet ref à React en tant que prop ref d’un nœud JSX, React définira automatiquement sa propriété current.

Limitations

  • createRef renvoie toujours un objet différent. C’est équivalent à écrire { current: null } vous-même.
  • Dans une fonction composant, vous voudrez certainement utiliser plutôt useRef, qui renverra toujours le même objet.
  • const ref = useRef(null) est équivalent à const [ref, _] = useState(() => createRef()).

Usage

Déclarer une ref dans un composant à base de classe

Pour déclarer une ref dans un composant à base de classe, appelez createRef et affectez son résultat à un champ d’instance :

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Si vous passez ensuite ref={this.inputRef} à un <input> dans votre JSX, React fera automatiquement pointer this.inputRef.current sur le nœud DOM du champ. Par exemple, voici comment écrire un bouton qui activera le champ :

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}>
          Activer le champ
        </button>
      </>
    );
  }
}

Piège

createRef est principalement utilisée pour les composants à base de classes. Les fonctions composants utilisent plutôt useRef.

Alternatives

Migrer d’une classe avec createRef à une fonction avec useRef

Pour tout nouveau code, nous vous conseillons d’utiliser des fonctions composants plutôt que des composants à base de classes. Si vous avez des composants existants à base de classes qui utilisent createRef, voici comment les convertir. Prenons le code original suivant :

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}>
          Activer le champ
        </button>
      </>
    );
  }
}

Lorsque vous convertissez ce composant d’une classe vers une fonction, remplacez les appels à createRef par des appels à 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}>
        Activer le champ
      </button>
    </>
  );
}
PrécédentcreateFactorySuivantisValidElement

Comment trouvez-vous ces docs ?