React'ta bir DOM öğesine nasıl erişilir? document.getElementById ait equilvalent nedir() I react.js belirli çubukları nasıl seçerim

Question

Tepki? Ben handleClick10 işlevini yürütmek ve Seçili progressbar için işlemi gerçekleştirmek isteyen

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> 
) 
} 

}); 

: Ben bu bileşeni Tepki kullanmak istiyorum

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 (...); 
} 

:

Bu benim kodudur. Ama olsun sonucudur:

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

nasıl react.js belirli Eleman seçerim?

Answer 1

Sen elemanı almak için 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"/> 

belirterek sadece böyle devam

var object = this.refs.Progress1; 

ve ...

DÜZENLEME yapmak bunu yapabilir

Ancak facebook, karşı t dize bazı sorunlara sahip olduğu için miras sayılır ve gelecekteki sürümlerden birinde kaldırılması muhtemeldir. Dokümanlar

:

Eski API: String Refs

Birlikte çalıştığınız Eğer ref Öznitelik dize gibi olan eski bir API ile tanıdık olabilir, daha önce tepki "textInput" ve DOM düğümü bu.refs.textInput olarak erişildi. biz buna karşı tavsiyede bulunuyoruz çünkü string referansları bazı sorunlar içeriyor, mirası olarak kabul ediliyor ve gelecekteki sürümlerden birinde çıkarılması muhtemel. , şu anda bu.refs.textInput'u kullanarak referanslara erişmek istiyorsanız, yerine geri arama modelini öneririz.

bir yolu sana ref ve içinde kullanmak gerekir tepki de eleman almak için bu

<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 for using callback

Answer 2

yardımcı olur umarım geri arama düzeninin

kullanmaktır tavsiye ReactDOM.findDOMNode yöntemini kullanabileceğiniz işlev.

Ama benim daha yapmak ister sağ olay

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

Bu anladım yardımcı olmak için bazı iyi bağlantı olduğunu içeride ref aramaya bulunuyor.

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

Answer 3

Sen

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

yerine Facebook bu yaklaşımın karşı tavsiyede

this.refs[this.state.baction].addPrecent(10); 


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