Comment accéder à un élément DOM dans React? Quel est l'équilibre de document.getElementById () in React

Je souhaite sélectionner certaines barres dans 3 bars dans react.js comment le faire?

C'est mon code:

var Progressbar = React.createClass({ getInitialState: function() { return {completed:this.props.completed}; }, addPrecent: function(value){ this.props.completed+=value; this.setState({completed:this.props.completed}); }, render: function() { var completed = this.props.completed; if (completed < 0) {completed = 0}; return (...); }

Je veux utiliser ce compoment de réaction:

 var App = React.createClass({ getInitialState: function() { return {baction: 'Progress1'}; }, handleChange: function(e){ var value = e.target.value; console.log(value); this.setState({baction:value}); }, handleClick10:function(e){ console.log('You clicked: ', this.state.baction ); document.getElementById(this.state.baction).addPrecent(10); }, render: function() { return ( <div class="center">Progress Bars Demo <Progressbar completed={25} id="Progress1"/> <h2 class="center"></h2> <Progressbar completed={50} id="Progress2"/> <h2 class="center"></h2> <Progressbar completed={75} id="Progress3"/> <h2 class="center"></h2> <span> <select name='selectbar' id='selectbar' value={this.state.baction} onChange={this.handleChange}> <option value="Progress1">#Progress1</option> <option value="Progress2">#Progress2</option> <option value="Progress3">#Progress3</option> </select> <input type="button" onClick={this.handleClick10} value="+10"/> <button>+25</button> <button>-10</button> <button>-25</button> </span> </div> ) } });

Je souhaite exécuter la fonction handleClick10 et effectuer une opération pour la barre de progression sélectionnée. Mais j'ai un résultat:

  You clicked: Progress1 TypeError: document.getElementById(...) is null

Comment sélectionner le Certain Element dans react.js?

Vous pouvez le faire en spécifiant le 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, il suffit de faire

 var object = this.refs.Progress1;

etc…

MODIFIER

Cependant, Facebook conseille de le faire parce que les références de chaîne ont des problèmes, sont considérées comme héritées et sont susceptibles d'être supprimés dans l'une des versions futures.

Du docs:

Legacy API: String Refs

Si vous avez travaillé avec React avant, vous pourriez être familier avec une ancienne API où l'attribut ref est une chaîne, comme "textInput", et le nœud DOM est accessible comme this.refs.textInput. Nous vous en conseillons parce que les références de chaîne ont des problèmes, sont considérées comme un legs et sont susceptibles d'être supprimées dans l'une des versions futures. Si vous utilisez actuellement this.refs.textInput pour accéder aux références, nous recommandons le modèle de rappel à la place.

Une façon recommandée est d'utiliser le motif de rappel

J'espère que ça aide

 <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 du rappel

Pour que l'élément réagisse, vous devez utiliser ref et à l'intérieur de la fonction, vous pouvez utiliser la méthode ReactDOM.findDOMNode .

Mais ce que j'aime faire plus, c'est appeler le droit de ref directement dans l'événement

<input type="text" ref={ref => this.myTextInput = ref} />

C'est un bon lien pour vous aider à comprendre.

https://facebook.github.io/react/docs/refs-and-the-dom.html

Vous pouvez remplacer

 document.getElementById(this.state.baction).addPrecent(10);

par

 this.refs[this.state.baction].addPrecent(10); <Progressbar completed={25} ref="Progress1" id="Progress1"/>