Bagaimana cara memilih bilah tertentu di react.js?
Ini kode saya:
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 (...);
}
Saya ingin menggunakan komponen Bereaksi ini:
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>
)
}
});
Saya ingin menjalankan fungsi handleClick10 dan melakukan operasi untuk progressbar yang saya pilih. Tapi hasil yang saya dapatkan adalah:
You clicked: Progress1
TypeError: document.getElementById(...) is null
Bagaimana cara memilih Elemen tertentu di react.js?
sumber
Untuk mendapatkan elemen di dalamnya,
react
Anda perlu menggunakanref
dan di dalam fungsi Anda dapat menggunakanReactDOM.findDOMNode
metode.Tapi yang ingin saya lakukan lebih banyak adalah memanggil ref tepat di dalam acara tersebut
Ini adalah beberapa tautan yang bagus untuk membantu Anda mencari tahu.
sumber
this.myTextInput
untuk mengakses.React.findDOMNode
memberi sayareact__WEBPACK_IMPORTED_MODULE_0___default.a.findDOMNode is not a function
React.findDOMNode
dalam mode ketat.Anda bisa mengganti
dengan
sumber
Karena Bereaksi menggunakan kode JSX untuk membuat HTML, kami tidak dapat merujuk dom menggunakan metode regulasi seperti documment.querySelector atau getElementById.
Sebagai gantinya kita dapat menggunakan React sistem ref untuk mengakses dan memanipulasi Dom seperti yang ditunjukkan pada contoh di bawah ini:
}
sumber