Komponen React memiliki state objek bawaan. The stateobjek Adalah di mana kalian menyimpan Nilai Properti Yang dimiliki Komponen. Saat stateobjek berubah, komponen merender kembali.
Membuat State Objek
The stateobjek diinisialisasi di constructor:
Contoh Syntax
Tentukan stateobjek dalam metode konstruktor:
class Car extends React.Component { constructor(props) { super(props); this.state = {brand: "Ford"}; } render() { return ( <div> <h1>My Car</h1> </div> ); } }
The stateobjek DAPAT Berisi sebanyak Sifat Yang kalian Suka:
Contoh Syntax
Tentukan semua properti yang kalian butuhkan di komponen:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}Menggunakan stateObject
Merujuk ke stateobjek di mana saja di komponen dengan menggunakan sintaks:this.state.propertyname
Contoh
Mengacu ke stateobjek dalam render()metode:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
ReactDOM.render(<Car />, document.getElementById('root'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
Mengubah State Objek
Untuk mengubah nilai di objek status, gunakan this.setState()metode. Ketika nilai di stateobjek berubah, komponen akan dirender ulang, yaitu output akan berubah sesuai dengan nilai baru.
Contoh
Tambahkan tombol dengan onClickacara yang akan mengubah properti warna:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
ReactDOM.render(<Car />, document.getElementById('root'));index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>Dan hasilnya adalah sebagai berikut :
dan ketika di klik change color, hasilnya seperti ini :
