Pengendali Global melalui useEffect dalam React

Katakan sekarang kita mahu warna ditukar bukan sahaja dengan mengklik tetapi juga dengan menekan kekunci Enter pada papan kekunci. Dalam kehidupan React biasa, mendengar objek global window menggunakan addEventListener tidak dibenarkan. Untuk itu, kita mempunyai kesan. Mari tambahkan tindakan ini menggunakan useEffect.

Tulis fungsi pengendali untuk klik pada Enter. Biarkan warna dalam kes ini bertukar kepada merah:

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

Sekarang, sambungkan pendengaran peristiwa kepada window dalam hook useEffect:

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

Jika kita mempunyai sebarang fungsi persediaan, maka kita sentiasa perlu mengembalikan kod pembersihan atau nyahlanggan dalam useEffect untuk mengelakkan masalah pada masa hadapan. Dalam kes ini, kita perlu mengembalikan penyingkirannya selepas melampirkan addEventListener:

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

Diberi komponen. Buat supaya dengan mengklik di mana-mana tempat pada halaman, latar belakang komponen ini menukar warna.

Buat pautan, apabila ditekan blok akan muncul. Buat supaya dengan menekan di mana-mana tempat pada tetingkap pelayar blok kami disembunyikan.