Comment puis-je accéder aux éléments DOM dans React ?

Accès aux éléments DOM dans React

Comment obtenir des éléments DOM dans React ?

Dans React, accéder aux éléments DOM est pas aussi simple que d'utiliser getElementById() en JavaScript traditionnel. React gère la manipulation du DOM différemment, en donnant la priorité aux performances et aux différences du DOM virtuel.

React Refs

Pour accéder aux éléments DOM dans React, vous devez utiliser des références. Les références sont un moyen pour React de conserver une référence à un élément DOM créé par un composant React. Il existe plusieurs façons de créer des références dans React :

• Références de chaîne (héritage) :
  Dans les anciennes versions de React, vous pouviez utiliser des références de chaîne pour accéder aux éléments en définissant l'attribut ref à une chaîne. Cependant, cette approche est déconseillée et pourrait être supprimée dans les versions futures.

• Références de rappel :
  Une approche recommandée consiste à utiliser des références de rappel. Avec les références de rappel, vous transmettez une fonction de rappel comme valeur de l'attribut ref. La fonction reçoit l'élément DOM comme argument.

  Exemple :

  <Progressbar completed={25}>

  Copier après la connexion

• React.createRef (Composants fonctionnels) :
  Pour les composants fonctionnels introduits dans React 16.8, vous pouvez utiliser React.createRef(). Cela renvoie un objet ref que vous pouvez attribuer à un attribut.

  Exemple :

  const myRef = React.createRef();
  
  const handleClick = () => {
    const node = myRef.current;
  }
  
  return <div ref={myRef} onClick={handleClick} />;

  Copier après la connexion

Accès à l'élément

Une fois que vous avez créé une référence, vous pouvez accéder à l'élément DOM comme suit :

• Références de chaîne héritées :
  this.refs.elementName
• Callback Refs :
  this.elementName
• React.createRef :
  refObject.current

Par exemple :

const node = this.refs.Progress1;
const node = this.Progress[0];
const node = myRef.current;

Dans votre cas spécifique, vous pouvez utiliser des références de rappel pour accéder aux éléments de la barre de progression et effectuer la Fonction handleClick10 :

handleClick10 = (e) => {
    const progressElement = this.refs[this.state.baction];
    if (progressElement) {
        progressElement.addPrecent(10);
    }
};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!