Jak wybrać określone paski w pliku reag.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żyć tego komponentu 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>
)
}
});
Chcę uruchomić funkcję handleClick10 i wykonać operację dla wybranego paska postępu. Ale wynik to:
You clicked: Progress1
TypeError: document.getElementById(...) is null
Jak wybrać określony element w React.js?
źródło
Aby wprowadzić element
react
, musisz użyć,ref
a wewnątrz funkcji możesz użyćReactDOM.findDOMNode
metody.Ale to, co lubię robić, to zadzwonić do sędziego bezpośrednio w trakcie wydarzenia
To jest dobry link, który pomoże ci zrozumieć.
źródło
this.myTextInput
celu uzyskania dostępu.React.findDOMNode
daje mireact__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function
React.findDOMNode
w trybie ścisłym.Możesz wymienić
z
źródło
Ponieważ React używa kodu JSX do utworzenia HTML, nie możemy polecać domeny przy użyciu metod regulacji, takich jak documment.querySelector lub getElementById.
Zamiast tego możemy użyć systemu referencyjnego React, aby uzyskać dostęp do Dom i manipulować nim, jak pokazano w poniższym przykładzie:
}
źródło