Как выбрать определенные бары в Reaction.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 и выполнить операцию для моего выбранного индикатора выполнения. Но результат, который я получаю:
You clicked: Progress1
TypeError: document.getElementById(...) is null
Как мне выбрать определенный элемент вact.js?
источник
Для получения элемента
react
вам нужно использоватьref
и внутри функции вы можете использоватьReactDOM.findDOMNode
метод.Но то, что мне нравится делать больше, это вызывать реф прямо на мероприятии
Это хорошая ссылка, которая поможет вам разобраться.
источник
this.myTextInput
для доступа.React.findDOMNode
дает мнеreact__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function
React.findDOMNode
в строгом режиме.Вы можете заменить
с участием
источник
Поскольку React использует код JSX для создания HTML, мы не можем ссылаться на dom, используя методы регулирования, такие как documment.querySelector или getElementById.
Вместо этого мы можем использовать систему React ref для доступа и управления Dom, как показано в следующем примере:
}
источник