Jak uzyskać dostęp do elementu DOM w React? Co to jest equilvalent dokumentu document.getElementById() w React

Question

Jak wybrać określone paski w pliku react.js?

To jest mój kod:

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

Chcę używać tego React komponent:

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

}); 

Chcę uruchomić funkcję handleClick10 i wykonać operację dla wybranego ProgressBar. Ale wynik pojawia się:

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

Jak wybrać pewien element react.js?

Answer 1

Można to zrobić poprzez określenie 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"/> 

aby uzyskać element prostu zrobić

var object = this.refs.Progress1; 

i tak dalej ...

EDIT

Jednak Facebook radzi przeciwko i t ponieważ odwołania łańcuchowe mają pewne problemy, są uważane za starsze i prawdopodobnie zostaną usunięte w jednej z przyszłych wersji.

Od docs:

Legacy API: String Refs

Jeśli pracowałeś z React przed, może być zaznajomieni ze starszym API gdzie atrybut ref jest ciągiem znaków, jak "textInput", a węzeł DOM jest dostępny jako this.refs.textInput. Mamy odradzamy, ponieważ odwołania łańcuchowe mają pewne problemy, są uważane za starsze i prawdopodobnie zostaną usunięte w jednej z przyszłych wersji. Jeśli obecnie używasz tego pliku.refs.textInput do uzyskiwania dostępu do referencji, polecamy ten model wywołania zwrotnego.

Zalecanym sposobem jest użyć deseniu oddzwonienia

Mam nadzieję, że to pomaga

<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

Aby uzyskać element reagować trzeba użyć ref i wewnątrz funkcja ta może być używana w metodzie ReactDOM.findDOMNode.

Ale to, co lubię robić dalej to, aby wywołać ref bezpośrednio w przypadku

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

To jest jakiś dobry link, aby pomóc Ci zorientowali się.

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

Answer 3

Można zastąpić

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

przez

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


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