Οι περισσότερες εφαρμογές ιστού ανταποκρίνονται στα συμβάντα κλικ με τον ένα ή τον άλλο τρόπο και ο εντοπισμός ακριβώς του σημείου που έγινε το κλικ είναι ζωτικής σημασίας για την καλή λειτουργία της διεπαφής χρήστη.

Πολλές διεπαφές χρήστη χρησιμοποιούν στοιχεία που εμφανίζονται με βάση συμβάντα, όπως ένα κλικ κουμπιού. Όταν εργάζεστε με ένα τέτοιο στοιχείο, θα θέλετε έναν τρόπο να το κρύψετε ξανά, συνήθως ως απόκριση σε ένα κλικ εκτός των ορίων του.

Αυτό το μοτίβο είναι ιδιαίτερα χρήσιμο για στοιχεία όπως modals ή slide-in μενού.

Χειρισμός κλικ έξω από ένα στοιχείο

Υποθέτοντας ότι έχετε την ακόλουθη σήμανση στην εφαρμογή σας και θέλετε να κλείσετε το εσωτερικό στοιχείο όταν κάνετε κλικ στο εξωτερικό στοιχείο:

<Εξωτερικό Στοιχείο>
<InnerElement/>
Εξωτερικό Στοιχείο>

Για να χειριστείτε κλικ έξω από ένα στοιχείο, πρέπει επισυνάψτε έναν ακροατή εκδήλωσης στο εξωτερικό στοιχείο. Στη συνέχεια, όταν συμβεί ένα συμβάν κλικ, αποκτήστε πρόσβαση στο αντικείμενο συμβάντος και εξετάστε την ιδιότητα προορισμού του.

instagram viewer

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

Αυτή είναι μια εξήγηση υψηλού επιπέδου για το πώς χειρίζεστε τα κλικ εκτός ενός στοιχείου. Για να δείτε πώς θα λειτουργούσε αυτό σε μια εφαρμογή React, θα χρειαστεί δημιουργήστε ένα νέο έργο React χρησιμοποιώντας το Vite.

Μπορείτε να δημιουργήσετε το έργο χρησιμοποιώντας άλλες μεθόδους ή απλά να χρησιμοποιήσετε ένα υπάρχον έργο.

Χειρισμός κλικ έξω από ένα στοιχείο σε μια εφαρμογή React

Στη βάση του έργου σας, δημιουργήστε ένα νέο αρχείο που ονομάζεται Αρχική σελίδα.jsx και προσθέστε τον ακόλουθο κώδικα για να δημιουργήσετε ένα div που θα πρέπει να κρύβεται όταν κάνετε κλικ στο στοιχείο ενότητας.

εισαγωγή { useEffect, useRef } από"αντιδρώ";
εξαγωγήσυνθ Σπίτι = () => {
συνθ outerRef = useRef();


 useEffect(() => {
συνθ handleClickOutside = (μι) => {
αν (outerRef.current && !outerRef.current.contains (e.target)) {
// Απόκρυψη του div ή εκτέλεση οποιασδήποτε επιθυμητής ενέργειας
 }
 };


έγγραφο.addEventListener("Κάντε κλικ", handleClickOutside);


ΕΠΙΣΤΡΟΦΗ() => {
έγγραφο.removeEventListener("Κάντε κλικ", handleClickOutside);
 };
 }, []);
ΕΠΙΣΤΡΟΦΗ (

πλάτος: "200px", ύψος: "200px", Ιστορικό: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Αυτός ο κώδικας χρησιμοποιεί το άγκιστρο useRef για να δημιουργήσει ένα αντικείμενο με όνομα outerRef. Στη συνέχεια, αναφέρεται σε αυτό το αντικείμενο μέσω της ιδιότητας ref του στοιχείου div.

Μπορείτε να χρησιμοποιήσετε το useEffect συνδέστε για να προσθέσετε ένα πρόγραμμα ακρόασης συμβάντων στη σελίδα. Ο ακροατής εδώ καλεί το handleClickOutside λειτουργία όταν ένας χρήστης ενεργοποιεί το συμβάν κλικ. ο useEffect Το άγκιστρο επιστρέφει επίσης μια λειτουργία εκκαθάρισης που καταργεί το πρόγραμμα ακρόασης συμβάντων κατά την αποπροσάρτηση του στοιχείου Home. Αυτό διασφαλίζει ότι δεν υπάρχουν διαρροές μνήμης.

Η συνάρτηση handleClickOutside ελέγχει εάν ο στόχος συμβάντος είναι το στοιχείο div. Το αντικείμενο ref παρέχει τις πληροφορίες του στοιχείου στο οποίο αναφέρεται σε ένα αντικείμενο που ονομάζεται ρεύμα. Μπορείτε να το ελέγξετε για να δείτε αν το στοιχείο div ενεργοποίησε τον ακροατή επιβεβαιώνοντας ότι δεν περιέχει το event.target. Εάν δεν το κάνει, μπορείτε να αποκρύψετε το div.

Δημιουργία προσαρμοσμένου άγκιστρου για χειρισμό κλικ έξω από ένα στοιχείο

Ένα προσαρμοσμένο άγκιστρο θα σας επέτρεπε να επαναχρησιμοποιήσετε αυτήν τη λειτουργία σε πολλά στοιχεία χωρίς να χρειάζεται να την ορίζετε κάθε φορά.

Αυτό το άγκιστρο θα πρέπει να δέχεται δύο ορίσματα, μια συνάρτηση επανάκλησης και ένα αντικείμενο αναφοράς.

Σε αυτό το άγκιστρο, η συνάρτηση επανάκλησης είναι η συνάρτηση που καλείται όταν κάνετε κλικ στο χώρο έξω από το στοιχείο προορισμού. Το αντικείμενο αναφοράς αναφέρεται στο εξωτερικό στοιχείο.

Για να δημιουργήσετε το άγκιστρο, προσθέστε ένα νέο αρχείο με το όνομα useClickOutside στο έργο σας και προσθέστε τον ακόλουθο κώδικα:

εισαγωγή { useEffect } από"αντιδρώ";
εξαγωγήσυνθ useOutsideClick = (επανάκληση, αναφ) => {
συνθ handleClickOutside = (Εκδήλωση) => {
αν (αναφ. τρέχον && !αναφορά τρέχοντος.περιέχει (γεγονός.στόχος)) {
 επανάκληση();
 }
 };
 useEffect(() => {
έγγραφο.addEventListener("Κάντε κλικ", handleClickOutside);
ΕΠΙΣΤΡΟΦΗ() => {
έγγραφο.removeEventListener("Κάντε κλικ", handleClickOutside);
 };
 });
};

Αυτό το άγκιστρο λειτουργεί με τον ίδιο τρόπο όπως το προηγούμενο παράδειγμα κώδικα, το οποίο εντόπισε εξωτερικά κλικ μέσα στο στοιχείο Home. Η διαφορά είναι ότι είναι επαναχρησιμοποιήσιμο.

Για να το χρησιμοποιήσετε, εισάγετέ το στο αρχικό στοιχείο και περάστε μια συνάρτηση επανάκλησης και ένα αντικείμενο αναφοράς.

συνθ hideDiv = () => {
κονσόλα.κούτσουρο("Κρυφό div");
};
useOutsideClick (closeModal, outerRef);

Αυτή η προσέγγιση αφαιρεί τη λογική του εντοπισμού κλικ έξω από ένα στοιχείο και κάνει τον κώδικά σας πιο ευανάγνωστο.

Βελτιώστε την εμπειρία χρήστη εντοπίζοντας κλικ έξω από ένα στοιχείο

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