Wie wähle ich bestimmte Balken in react.js aus?
Das ist mein Code:
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 (...);
}
Ich möchte diese React-Komponente verwenden:
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>
)
}
});
Ich möchte die handleClick10-Funktion ausführen und die Operation für meinen ausgewählten Fortschrittsbalken ausführen. Aber das Ergebnis ist:
You clicked: Progress1
TypeError: document.getElementById(...) is null
Wie wähle ich das bestimmte Element in react.js aus?
quelle
Um das Element zu erhalten
react
, müssen Sie es verwenden,ref
und innerhalb der Funktion können Sie dieReactDOM.findDOMNode
Methode verwenden.Aber was ich mehr tun möchte, ist, den Schiedsrichter direkt innerhalb des Events anzurufen
Dies ist ein guter Link , der Ihnen hilft, dies herauszufinden.
quelle
this.myTextInput
zugreifen können.React.findDOMNode
gibt mirreact__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function
React.findDOMNode
im strengen Modus arbeiten können.Sie können ersetzen
mit
quelle
Da React JSX-Code zum Erstellen eines HTML-Codes verwendet, können wir dom nicht mit Regulierungsmethoden wie documment.querySelector oder getElementById referenzieren.
Stattdessen können wir das React ref-System verwenden, um auf Dom zuzugreifen und ihn zu bearbeiten, wie im folgenden Beispiel gezeigt:
}}
quelle