Kuinka havaita napsautukset reagoivan osan ulkopuolelta mukautetun koukun avulla

Monet käyttöliittymät käyttävät komponentteja, jotka näkyvät tapahtumien, kuten painikkeen klikkauksen, perusteella. Kun työskentelet tällaisen komponentin kanssa, haluat piilottaa sen uudelleen, yleensä vastauksena napsautukseen sen rajan ulkopuolella.

Tämä kuvio on erityisen hyödyllinen komponenteille, kuten modaaleille tai liukuvalikoilla.

Klikkausten käsittely elementin ulkopuolella

Olettaen, että sovelluksessasi on seuraavat merkinnät ja haluat sulkea sisäisen elementin, kun napsautat ulompaa elementtiä:

<Ulkoelementti>
<InnerElement/>
Ulkoelementti>

Jotta voit käsitellä napsautuksia elementin ulkopuolella, sinun on tehtävä se liitä tapahtumakuuntelija ulompaan elementtiin. Sitten, kun napsautustapahtuma tapahtuu, käytä tapahtumaobjektia ja tutki sen kohdeominaisuutta.

Jos tapahtumakohde ei sisällä sisäelementtiä, se tarkoittaa, että napsautustapahtumaa ei käynnistetty sisäisessä elementissä. Tässä tapauksessa sinun tulee poistaa tai piilottaa sisäelementti DOM: sta.

Tämä on korkeatasoinen selitys siitä, kuinka käsittelet napsautuksia elementin ulkopuolella. Jos haluat nähdä, kuinka tämä toimisi React-sovelluksessa, sinun on Luo uusi React-projekti Viten avulla.

Voit luoda projektin muilla menetelmillä tai yksinkertaisesti käyttää olemassa olevaa projektia.

Elementin ulkopuolella olevien napsautusten käsittely React-sovelluksessa

Luo projektisi pohjalle uusi tiedosto nimeltä Etusivu.jsx ja lisää seuraava koodi luodaksesi div, jonka pitäisi piiloutua, kun napsautat osioelementtiä.

tuonti { useEffect, useRef } alkaen"reagoi";
viedäkonst Etusivu = () => {
konst outerRef = useRef();
 useEffect(() => {
konst handleClickOutside = (e) => {
jos (outerRef.current && !outerRef.current.contains (e.target)) {
// Piilota div tai suorita haluamasi toiminto
 }
 };
asiakirja.addEventListener("klikkaus", HandClickOutside);
palata() => {
asiakirja.removeEventListener("klikkaus", HandClickOutside);
 };
 }, []);
palata (

leveys: "200px", korkeus: "200px", tausta: "#000" }} ref={outerRef}></div>
 </section>
 );
};

Tämä koodi käyttää useRef-koukkua nimetyn objektin luomiseen outerRef. Sitten se viittaa tähän objektiin div-elementin ref-ominaisuuden kautta.

Voit käyttää useEffect koukku lisätäksesi tapahtumakuuntelijan sivulle. Täällä oleva kuuntelija soittaa HandClickOutside toiminto, kun käyttäjä käynnistää napsautustapahtuman. The useEffect hook palauttaa myös puhdistustoiminnon, joka poistaa tapahtumien kuuntelijan, kun Home-komponentti irrotetaan. Tämä varmistaa, ettei muistivuotoja ole.

HandelClickOutside-funktio tarkistaa, onko tapahtuman kohde div-elementti. Ref-objekti tarjoaa tiedot elementistä, johon se viittaa objektissa, jota kutsutaan nykyiseksi. Voit tarkistaa sen nähdäksesi, laukaisiko div-elementti kuuntelijan, varmistamalla, että se ei sisällä tapahtuma.target. Jos näin ei ole, voit piilottaa div.

Mukautetun koukun luominen komponentin ulkopuolisten napsautusten käsittelyyn

Mukautetun koukun avulla voit käyttää tätä toimintoa uudelleen useissa komponenteissa ilman, että sitä tarvitsee määrittää joka kerta.

Tämän koukun tulisi hyväksyä kaksi argumenttia, takaisinsoittotoiminto ja ref-objekti.

Tässä koukussa takaisinsoittotoiminto on toiminto, jota kutsutaan, kun napsautat kohdeelementin ulkopuolella olevaa tilaa. Ref-objekti viittaa ulompaan komponenttiin.

Luo koukku lisäämällä uusi tiedosto nimeltä useClickOutside projektiisi ja lisää seuraava koodi:

tuonti { useEffect } alkaen"reagoi";
viedäkonst useOutsideClick = (takaisinsoitto, ref) => {
konst handleClickOutside = (tapahtuma) => {
jos (ref.current && !ref.current.contains (event.target)) {
 soita takaisin();
 }
 };
 useEffect(() => {
asiakirja.addEventListener("klikkaus", HandClickOutside);
palata() => {
asiakirja.removeEventListener("klikkaus", HandClickOutside);
 };
 });
};

Tämä koukku toimii samalla tavalla kuin edellinen koodiesimerkki, joka havaitsi ulkopuoliset napsautukset Home-komponentin sisällä. Erona on, että se on uudelleenkäytettävä.

Käyttääksesi sitä, tuo se kotikomponenttiin ja välitä takaisinsoittotoiminto ja ref-objekti.

konst hideDiv = () => {
konsoli.Hirsi("Piilotettu div");
};
useOutsideClick (closeModal, outerRef);

Tämä lähestymistapa abstraktioi elementin ulkopuolisten napsautusten havaitsemisen logiikan ja tekee koodistasi helpompi lukea.

Paranna käyttökokemusta tunnistamalla napsautukset komponentin ulkopuolelta

Olipa kyseessä avattavan valikon sulkeminen, modaalin hylkääminen tai tiettyjen elementtien näkyvyyden vaihtaminen, komponentin ulkopuolisten napsautusten havaitseminen mahdollistaa intuitiivisen ja saumattoman käyttökokemuksen. Reactissa voit käyttää ref-objekteja ja napsauta tapahtumakäsittelijöitä luodaksesi mukautetun koukun, jota voit käyttää uudelleen sovelluksessasi.