Как получить доступ к элементу DOM в React? Что такое equilvalent документа.getElementById() в React

Question

Как выбрать определенные столбцы в файле response.js?

Это мой код:

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

Я хочу использовать этот компонент React:

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

}); 

Я хочу, чтобы выполнить функцию handleClick10 и выполнить операцию для выбранного мной ProgressBar. Но результат я получаю:

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

Как выбрать определенный элемент в react.js?

Answer 1

Вы можете сделать это, указав 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"/> 

Для того, чтобы получить элемент просто сделать

var object = this.refs.Progress1; 

и так далее ...

EDIT

Однако facebook советует против i t, поскольку строки refs имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков.

Из документов:

Наследство API: String Refs

Если вы работали с React раньше, вы можете быть знакомы со старым API, где атрибут исх является строкой, как «textInput», а узел DOM доступен как this.refs.textInput. Мы сообщим , потому что строки refs имеют некоторые проблемы, считаются устаревшими и могут быть удалены в одном из будущих выпусков. Если вы в настоящее время используете this.refs.textInput для доступа к refs, мы вместо этого рекомендуем использовать шаблон обратного вызова.

Рекомендуемый способ использовать шаблон CallBack

Я надеюсь, что это помогает

<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

Для получения элемента в реакции необходимо использовать ref и внутри функцию вы можете использовать метод ReactDOM.findDOMNode.

Но что мне нравится делать больше это назвать реф прямо в случае

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

Это хорошая ссылка, чтобы помочь вам выяснили.

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

Answer 3

Вы можете заменить

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

по

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


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