Bagaimana Cara Membuat Countdown Timer Dengan React
Terkadang, kami ingin membuat penghitung waktu mundur dengan React.
Pada artikel ini, kita akan melihat cara membuat penghitung waktu mundur dengan React.
Buat Penghitung Waktu Mundur dengan React, kita dapat membuat penghitung waktu mundur dengan membuat komponen penghitung waktu yang memperbarui sisa waktu secara teratur.
Untuk melakukan ini, kami menulis:
</h1>
)}
</div>
);
};
export default function App() {
return (
<>
<Timer initialMinute={5} initialSeconds={0} />
</>
);Kita membuat Timer komponen yang mengambil initialMinute and initialSeconds alat peraga yang mengatur waktu awal.
Kemudian kita menggunakan useState prop untuk membuat minutes and second negara.
Selanjutnya, kita memanggil useEffect hook dengan callback yang membuat timer dengan setInterval.
Timer berjalan setiap detik.
Itu setInterval panggilan balik memeriksa apakah detik lebih besar dari 0 dan menelepon setSecond untuk mengurangi detik.
Jika second 0 dan minutes 0, maka kami memanggil clearInterval untuk menghentikan timer.
Jika tidak, kami memanggil setMinutes ke minutes — 1 dan memanggil setSecond ke 59 pengurangan menit.
Kemudian kami mengembalikan panggilan balik yang memanggil clearInterval untuk menghapus pengatur waktu.
Di bawahnya, kami merender minutes dan seconds ke layar.
Jika seconds kurang dari 10 maka kita tambahkan 0 di depannya.
Kesimpulan
Kita dapat membuat penghitung waktu mundur dengan membuat komponen penghitung waktu yang memperbarui sisa waktu secara teratur.