Как получить доступ к элементу 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; }
и так далее...
EDIT
однако facebook советует против этого, потому что string refs имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков.
от документы:
Legacy API: String Refs
если вы работали с React раньше, вы можете быть знаком с более старым API, где атрибут ref является строкой, например "текстовые поля", и DOM-узле осуществляется как это.рефери.текстовые поля. Мы советую не делать этого, потому что строки refs имеют некоторые проблемы, рассматриваются наследие, и, вероятно, будут удалены в одном из будущих выпусков. Если вы в настоящее время используете это.рефери.textInput для доступа к ссылкам, мы вместо этого рекомендуется использовать шаблон обратного вызова.
рекомендуемый способ для реагировать 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} />
Это хорошая ссылка, чтобы помочь вам понять.