Penangan Global melalui useEffect di React

Anggaplah sekarang kita ingin warna berubah tidak hanya dengan mengklik tombol, tetapi juga dengan menekan tombol Enter pada keyboard. Dalam kehidupan React biasa, menggunakan addEventListener untuk mendengarkan objek global window tidak diperbolehkan. Untuk itu, kita memiliki efek. Mari tambahkan aksi ini menggunakan useEffect.

Tulis fungsi penangan untuk klik pada Enter. Biarkan warnanya dalam hal ini berubah menjadi merah:

function handleEnter(event) {
	if (event.keyCode === 13) {
		setColor('red');
	}
}

Sekarang pasang pendengar event ke window dalam hook useEffect:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
}, [color]);

Jika kita memiliki semacam fungsi pemasangan, maka kita selalu perlu mengembalikan kode pembersihan atau pembatalan pendaftaran dalam useEffect untuk menghindari masalah di kemudian hari. Dalam kasus ini, setelah melampirkan addEventListener, kita perlu mengembalikan penghapusannya:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
	
	return () => {
		window.removeEventListener('keydown', handleEnter);
	};
}, [color]);

Diberikan sebuah komponen. Buatlah sehingga dengan mengklik di mana saja pada halaman, latar belakang komponen ini berubah warna.

Buatlah sebuah tautan, yang ketika ditekan akan memunculkan sebuah blok. Buatlah sehingga dengan menekan di mana saja pada jendela browser blok kita akan tersembunyi.