Postingan lainnya
Event ReactJS basic, mengapa teks di tombol tidak berubah ketika diklik ?
Saya ada potongan kode dari tahap belajar awal saya dengan ReactJS berikut ini :
// file Penampung Komponen-komponen Visual //./src/Component/KomponenVisual.js
import React from 'react';
class KomponenVisual extends React.Component { render() { return (
) } }
class Buttons extends React.Component{ state = {clicks1: 0, clicks2: 0};
updateButton1() { this.setState((prevState) => { clicks1: prevState.clicks1 += 1; });
console.log(this.state.clicks1); }
render(){ return (
{this.state.clicks1}
) } }
export default KomponenVisual;
//---------------------------------------------------------------------
//----------- FILE utama pembangun aplikasi // ./src/index.js import React from 'react'; import ReactDOM from 'react-dom';
import KomponenVisual from './Components/KomponenVisual'; import registerServiceWorker from './registerServiceWorker';
ReactDOM.render( , document.getElementById('buttons') );
registerServiceWorker();
//---------------------------------------------------------------------
// index.html
Pertanyaan saya adalah, mengapa teks pd tombol yg dirender tidak berubah ketika diklik? Jujur saya masih bingung dengan scope variabel, Perbedaan Object/Komponen/Fungsi dan state di React ini. Terimakasih
4 Jawaban:
this.state itu disimpenya di constructor()
import React from 'react';
class KomponenVisual extends React.Component {
render() {
return ( <Buttons/>)
}
}
class Buttons extends React.Component {
constructor(props){
super();
this.state = {
clicks1: 0,
clicks2: 0
};
}
updateButton1() {
this.setState((prevState) => {
clicks1: prevState.clicks1 += 1;
});
}
render() {
return ( <div>
<button onClick={this.updateButton1.bind(this)}>
{this.state.clicks1}
</button>
</div>
)
}
}
export default KomponenVisual
Jawaban Terpilih
makasih atas repon nya @azam007 , tp saya sudah melakukan itu sebelumnya, meletakkan state dlm constructor , dan masih blm berjalan sesuai harapan. Saya sudah berhasil dpt solusinya tp masih belum paham dgn solusi tsb. yaitu dgn code berikut pd method updateButton1 :
updateButton1() { this.setState((prevState) => { return{clicks1: prevState.clicks1 += 1,} });
oiya satu lagi utk koreksi @azam007 , dr beberapa tutorial reactJS (terutama yg terbaru) saya perhatikan bahwa deklarasi state dlm sebuah kelas tidak harus ditempatkan dlm constructor, meskipun secara umum spt itu. Itulah kenapa dengan jawaban yg kamu beri, masih tidak sesuai harapan.
kalo mau kaya gini
this.setState((prevState) => {
clicks1: prevState.clicks1 += 1;
});
tambah '(' dan ')' setelah '=>'
jadinya
this.setState((prevState) => ({
clicks1: prevState.clicks1 += 1;
}));
jadi tanpa return solanya arrow function