Refs React

React prend en charge une propriété très spécialeRef, que vous pouvez utiliser pour la lier à toute sortie de composant produite par render().

Cette propriété spéciale vous permet de référencer l'instance sous-jacente correspondante renvoyée par render(), ce qui garantit que vous obtenez toujours la bonne instance à tout moment.

Dans React, les refs offrent un moyen d'accéder aux éléments DOM ou aux instances de composants. Avec les refs, vous pouvez manipuler directement des éléments DOM ou obtenir des instances de composants enfants, ce qui convient à des scénarios comme la gestion du focus, la sélection de texte, la lecture multimédia, le déclenchement d'animations forcées ou l'intégration de bibliothèques DOM tierces.

Utilisation

Utilisez React.createRef ou useRef pour créer et accéder aux refs.

React.createRef est généralement utilisé dans les composants de classe, tandis que useRef est un Hook généralement utilisé dans les composants de fonction.

De plus, la liaison de this dans les fonctions de gestion d'événements peut être effectuée à l'aide de la syntaxe de propriété de classe pour éviter de créer une nouvelle fonction à chaque rendu.

  • Création d'une Ref: Utilisez-la dans le constructeur d'un composant de classeReact.createRefCréez un objet ref et affectez-le à une propriété de l'instance du composant.
  • Liaison de la Ref: Dans larenderméthode, liez l'objet ref à l'élément DOM qui doit être référencé.
  • Accès à la Ref: Dans les autres méthodes du composant, viathis.myInputRef.currentaccéder à l'élément DOM lié et manipuler ses propriétés et méthodes.

Exemple complet

Vous pouvez l'utiliser pour obtenir le composant React actuel, ou utiliser ref pour obtenir une référence au composant, comme le montre l'exemple suivant :

Exemple React

class MyComponent extends React.Component { constructor(props) { super(props); this.myInputRef = React.createRef(); } handleClick = () => { //Utiliser l'API DOM native pour obtenir le focus this.myInputRef.current.focus(); } render() { return ( <div> <input type="text" ref={this.myInputRef} /> <input type="button" value="Cliquez ici pour mettre le focus sur le champ de saisie" onClick={this.handleClick} /> </div> ); } }

Essayez-le vous-même »

Dans l'exemple, nous avons obtenu une référence à l'instance sous-jacente du champ de saisie, et après avoir cliqué sur le bouton, le champ de saisie reçoit le focus.

Nous pouvons également utiliser la méthode getDOMNode() pour obtenir l'élément DOM.

Création de refs

React fournit la méthode React.createRef pour créer des refs.

Exemple

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"));
// Rendre le composant MyComponent
root.render(<MyComponent />);

Refs de rappel

Une autre façon de créer des refs est d'utiliser une fonction de rappel. Cette approche était courante avant React 16.3 ; maintenant React.createRef est plus recommandé.

Exemple

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"));
// Rendre le composant MyComponent
root.render(<MyComponent />);

Accéder aux éléments DOM avec les refs

Grâce aux refs, vous pouvez accéder directement aux éléments DOM et les manipuler.

Exemple

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}>Changer l'arrière-plan</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendre le composant MyComponent
root.render(<MyComponent />);

Accéder aux instances des composants enfants avec les refs

Les refs peuvent également être utilisées pour accéder aux méthodes d'instance ou aux propriétés des composants enfants.

Exemple

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}>Mettre le focus sur l'entrée enfant</button>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendre le composant MyComponent
root.render(<MyComponent />);

Utilisation du Hook useRef (composants fonctionnels)

Dans les composants fonctionnels, vous pouvez utiliser le Hook useRef pour créer des refs.

Exemple

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}>Mettre le focus sur l'entrée</button>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendre le composant MyComponent
root.render(<MyComponent />);

Résumé

  • Création de refs: Utilisation dans les composants de classeReact.createRef, utilisation dans les composants fonctionnelsuseRef Hook.
  • Accès aux éléments DOM: Accéder directement aux éléments DOM et les manipuler via des refs.
  • Accès aux instances de composants enfants: Accéder aux méthodes ou propriétés d'instance d'un composant enfant via des refs.
  • Personnalisation des valeurs d'instance exposées: UtilisezuseImperativeHandleetforwardRefpour personnaliser la valeur d'instance qu'un composant enfant expose à son parent.
  • Refs en mode concurrent: Les refs fonctionnent toujours normalement en mode concurrent et peuvent être combinées avecuseTransitionet d'autres Hooks liés au mode concurrent.
Autres extensions