Menghitung dengan Langkah
Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 24 dari 42.
Setter menerima nilai baru apa pun: kamu tidak terbatas pada +1. Tambahkan 5, kalikan dengan 2, atur ulang ke nol:
setPoints(points + 5);
setPoints(points * 2);
setPoints(0);Tombol untuk jumlah yang berbeda hanyalah handler yang berbeda pada state yang sama:
<button onClick={() => setPoints(points + 5)}>+5</button>
<button onClick={() => setPoints(0)}>Reset</button>
Tantangan
MudahSebuah game memberikan 5 poin untuk setiap koin.
- Tambahkan state
pointsyang dimulai dari 0 dan tampilkan di span denganid="points". - Tombol
Collect coin(id="coin") menambahkan 5 setiap kali diklik.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar
1Mengenal React
Apa Itu React?Komponen PertamamuAturan Satu IndukJSX Bukan HTMLRangkuman: Mengenal React2Ekspresi JSX
Kurung KurawalMatematika dalam Kurung KurawalKurung Kurawal dalam AtributMemanggil Fungsi di JSXUlasan: Ekspresi JSX5State dan Event
Apa Itu State?Penghitung KlikMenghitung dengan LangkahBeralih dengan StateState IndependenRingkasan: State dan Event