Comment accéder à un élément DOM à réagir ? Ce qui est l’équivalant à document.getElementById() à réagir

Question

Comment puis-je sélectionner certains bars en react.js ?

Il s’agit de mon code :

Je veux utiliser ce composant de réagir :

Je veux exécuter la fonction handleClick10 et effectuer l’opération pour ma progressbar sélectionné. Mais le résultat que j’obtiens est :

Comment sélectionner l’élément de certain en react.js ?

Answer 1

Vous pouvez le faire en spécifiant l' ref

<Progressbar completed={25} id="Progress1" ref="Progress1"/>

    <h2 class="center"></h2>

    <Progressbar completed={50} id="Progress2" ref="Progress2"/>

      <h2 class="center"></h2>

    <Progressbar completed={75} id="Progress3" ref="Progress3"/>

Afin d'obtenir l'élément qui ne

var object = this.refs.Progress1;

N'oubliez pas d'utiliser this l'intérieur d'une flèche bloc de fonction comme:

print = () => {
  var object = this.refs.Progress1;  
}

et ainsi de suite...

MODIFIER

Cependant facebook déconseille parce que la chaîne de refs ont des problèmes, sont considérés comme un héritage, et sont susceptibles d'être retirés dans une des prochaines versions.

À partir de la documentation:

L'héritage de l'API: Chaîne de Refs

Si vous avez travaillé avec de Réagir avant, vous pourriez être familier avec les anciennes API où l'attribut ref est une chaîne de caractères, comme "textInput", et le nœud DOM est accessible que celui-ci.réf.textInput. Nous déconseillé parce que la chaîne de refs ont des problèmes, sont considérés comme l'héritage, et sont susceptibles d'être retirés dans une des prochaines versions. Si vous êtes actuellement en utilisant ce.réf.textInput pour accéder à refs, nous recommander le rappel du motif à la place.

Une méthode recommandée pour Réagir 16.2 et plus tôt est d'utiliser la fonction de rappel du motif:

<Progressbar completed={25} id="Progress1" ref={(input) => {this.Progress[0] = input }}/>

<h2 class="center"></h2>

<Progressbar completed={50} id="Progress2" ref={(input) => {this.Progress[1] = input }}/>

  <h2 class="center"></h2>

<Progressbar completed={75} id="Progress3" ref={(input) => {this.Progress[2] = input }}/>

DOC pour l'utilisation de rappel

Dans Réagissent 16.3+, utilisez React.createRef() pour créer votre réf.:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Pour accéder à l'élément, utilisez:

const node = this.myRef.current;

DOC pour l'utilisation de Réagir.createRef()

Answer 2

Pour obtenir l’élément dans vous devez utiliser et à l’intérieur de la fonction, vous pouvez utiliser le `` méthode.

Mais ce que je voudrais faire plus consiste à appeler la ref à l’intérieur même de l’événement

``

Il s’agit d’un bon lien pour vous aider à comprendre.

https://Facebook.github.IO/REACT/docs/REFS-and-the-DOM.html

Answer 3

Vous pouvez remplacer

par