Как получить доступ к элементу DOM в React? Что такое equilvalent документа.getElementById () в React
Как выбрать определенные бары в react.Яш?
Это мой код:
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.Яш?
3 ответов
вы можете сделать это, указав 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;
не забывайте использовать this
внутри функционального блока стрелки, как:
print = () => {
var object = this.refs.Progress1;
}
и так далее...
редактировать
однако facebook советует против этого, потому что string refs имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одной из будущих версий.
от docs:
устаревший API: String Refs
если вы работали с React раньше, вы можете быть знаком с более старым API, где атрибут ref является строкой, например "textInput", и узел DOM доступен как это.рефери.текстовые поля. Мы не советую, потому что у string refs есть некоторые проблемы, рассматриваются legacy, и, вероятно, будут удалены в одном из будущих выпусков. Если в настоящее время вы используете это.рефери.textInput для доступа к refs, мы вместо этого рекомендуется шаблон обратного вызова.
рекомендуемый способ для реагировать 16.2 и раньше использовать шаблон обратного вызова:
<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 для использования обратного вызова
на реагировать 16.3+ используйте React.createRef()
чтобы создать свой ref:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
для доступа к элементу используйте:
const node = this.myRef.current;
для получения элемента react
вам нужно использовать ref
и внутри функции вы можете использовать ReactDOM.findDOMNode
метод.
но что мне нравится делать больше, так это вызывать ref прямо внутри события
<input type="text" ref={ref => this.myTextInput = ref} />
Это хорошая ссылка, чтобы помочь Вам разобраться.
Вы можете заменить
document.getElementById(this.state.baction).addPrecent(10);
by
this.refs[this.state.baction].addPrecent(10);
<Progressbar completed={25} ref="Progress1" id="Progress1"/>