Καθολικοί Χειριστές μέσω useEffect στο React

Ας υποθέσουμε ότι τώρα θέλουμε το χρώμα να αλλάζει όχι μόνο με κλικ στο κουμπί, αλλά και με πάτημα του Enter στο πληκτρολόγιο. Στη συνηθισμένη ζωή του React δεν μπορούμε να ακούμε το καθολικό αντικείμενο window χρησιμοποιώντας addEventListener. Για αυτό έχουμε τα effects. Ας προσθέσουμε αυτήν τη δράση χρησιμοποιώντας το useEffect.

Ας γράψουμε τη συνάρτηση χειριστή για πάτημα του Enter. Ας αλλάξει το χρώμα σε αυτήν την περίπτωση σε κόκκινο:

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

Ας δέσουμε τώρα την ακρόαση συμβάντων στο window στο hook useEffect:

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

Εάν έχουμε κάποια συνάρτηση ρύθμισης, τότε πάντα πρέπει στο useEffect να επιστρέφουμε κωδικό καθαρισμού ή κατάργησης εγγραφής, ώστε να αποφύγουμε προβλήματα στο μέλλον. Σε αυτήν την περίπτωση πρέπει μετά την προσάρτηση του addEventListener να επιστρέψουμε την αφαίρεσή του:

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

Δίνεται ένα component. Κάντε έτσι ώστε με κλικ σε οποιοδήποτε σημείο της σελίδας το φόντο αυτού του component να αλλάζει χρώμα.

Δημιουργήστε έναν σύνδεσμο, upon clicking on which θα εμφανίζεται ένα block. Κάντε έτσι ώστε upon clicking σε οποιοδήποτε σημείο του παραθύρου του browser το block μας να κρύβεται.