Klikken buiten een React-component detecteren met behulp van een aangepaste hook

Veel gebruikersinterfaces gebruiken componenten die verschijnen op basis van gebeurtenissen zoals een klik op een knop. Wanneer u met een dergelijk onderdeel werkt, wilt u een manier om het weer te verbergen, meestal als reactie op een klik buiten de grens.

Dit patroon is vooral handig voor componenten zoals modals of inschuifmenu's.

Omgaan met klikken buiten een element

Ervan uitgaande dat u de volgende opmaak in uw toepassing heeft en u het binnenste element wilt sluiten wanneer u op het buitenste element klikt:

<BuitenElement>
<InnerElement/>
BuitenElement>

Om klikken buiten een element af te handelen, moet u dat wel doen voeg een gebeurtenislistener toe naar het buitenste element. Als er vervolgens een klikgebeurtenis plaatsvindt, gaat u naar het gebeurtenisobject en onderzoekt u de eigenschap target.

Als het gebeurtenisdoel het binnenste element niet bevat, betekent dit dat de klikgebeurtenis niet binnen het binnenste element is geactiveerd. In dit geval moet u het binnenste element van de DOM verwijderen of verbergen.

Dit is een uitgebreide uitleg over hoe u omgaat met klikken buiten een element. Om te zien hoe dit zou werken in een React-app, moet je dat doen maak een nieuw React-project met Vite.

U kunt het project op andere manieren maken of gewoon een bestaand project gebruiken.

Omgaan met klikken buiten een element in een React-toepassing

Maak aan de basis van uw project een nieuw bestand met de naam Thuis.jsx en voeg de volgende code toe om een ​​div te maken die moet worden verborgen wanneer u op het sectie-element klikt.

importeren { useEffect, useRef } van"Reageer";
exporterenconst Thuis = () => {
const buitensteRef = gebruikRef();
 gebruikEffect(() => {
const handleClickOutside = (e) => {
als (outerRef.current && !outerRef.current.contains (e.target)) {
// Verberg de div of voer een gewenste actie uit
 }
 };
document.addEventListener("Klik", handleClickOutside);
opbrengst() => {
document.removeEventListener("Klik", handleClickOutside);
 };
 }, []);
opbrengst (

breedte: "200 pixels", hoogte: "200 pixels", achtergrond: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Deze code gebruikt de hook useRef om een ​​object met de naam buitensteRef. Het verwijst vervolgens naar dit object via de eigenschap ref van het div-element.

U kunt de gebruikEffect hook om een ​​gebeurtenislistener aan de pagina toe te voegen. De luisteraar roept hier de handvatKlikBuiten functie wanneer een gebruiker de klikgebeurtenis activeert. De gebruikEffect hook retourneert ook een opschoonfunctie die de gebeurtenislistener verwijdert wanneer de Home-component wordt ontkoppeld. Dit zorgt ervoor dat er geen geheugenlekken zijn.

De functie handleClickOutside controleert of het gebeurtenisdoel het div-element is. Het ref-object levert de informatie van het element waarnaar het verwijst in een object met de naam current. U kunt het controleren om te zien of het div-element de luisteraar heeft getriggerd door te bevestigen dat het event.target niet bevat. Als dit niet het geval is, kunt u de div verbergen.

Een aangepaste hook maken voor het afhandelen van klikken buiten een component

Met een aangepaste hook kunt u deze functionaliteit in meerdere componenten hergebruiken zonder deze elke keer te hoeven definiëren.

Deze hook zou twee argumenten, een callback-functie en een ref-object moeten accepteren.

In deze hook is de callback-functie de functie die wordt aangeroepen wanneer u op de ruimte buiten het doelelement klikt. Het ref-object verwijst naar de buitenste component.

Om de hook te maken, voegt u een nieuw bestand toe met de naam gebruikClickOutside aan uw project en voeg de volgende code toe:

importeren { gebruikEffect } van"Reageer";
exporterenconst gebruikOutsideClick = (terugbellen, ref) => {
const handleClickOutside = (evenement) => {
als (ref.current && !ref.current.contains (event.target)) {
 Bel terug();
 }
 };
 gebruikEffect(() => {
document.addEventListener("Klik", handleClickOutside);
opbrengst() => {
document.removeEventListener("Klik", handleClickOutside);
 };
 });
};

Deze hook werkt op dezelfde manier als het vorige codevoorbeeld, dat klikken van buitenaf binnen de Home-component detecteerde. Het verschil is dat het herbruikbaar is.

Om het te gebruiken, importeert u het in de home-component en geeft u een callback-functie en een ref-object door.

const verbergDiv = () => {
troosten.log("Verborgen div");
};
gebruikOutsideClick (closeModal, outerRef);

Deze benadering abstraheert de logica van het detecteren van klikken buiten een element en maakt uw code leesbaarder.

Verbeter de gebruikerservaring door klikken buiten een component te detecteren

Of het nu gaat om het sluiten van een vervolgkeuzemenu, het sluiten van een modaal of het omschakelen van de zichtbaarheid van bepaalde elementen, het detecteren van klikken buiten een component zorgt voor een intuïtieve en naadloze gebruikerservaring. In React kun je de ref-objecten en klikgebeurtenishandlers gebruiken om een ​​aangepaste hook te maken die je in je hele applicatie kunt hergebruiken.