Kuidas tuvastada välist klõpsu rakenduse React ja Hooks abil

Foto: Alex Block saidil Unsplash

Mida tähendab „väline klõps”?

Võite mõelda sellele kui nupule. Väline klõps on viis teada saada, kas kasutaja klõpsab kõigel, aga mitte konkreetsel komponendil. Võib-olla olete seda käitumist näinud rippmenüü või ripploendi avamisel ja selle sulgemiseks väljaspool seda klõpsates.

Sellise funktsiooni jaoks on igasuguseid muid kasutusjuhte:

  • ripploendite sulgemisel
  • modaalakende sulgemisel
  • redigeerimisrežiimis redigeeritavatele elementidele üleminekul ja sellest väljas viibimisel
  • sulgemine
  • ja paljud teised…

Vaatame nüüd, kuidas saaksime kirjutada üldise ja korduvkasutatava Reacti komponendi, mis sisaldab seda käitumist.

Kuidas see välja näeb?

Õnnelik vool peaks välja nägema selline:

Komponendi struktuur

Selle komponendi toimimiseks peame dokumendi enda külge kinnitama klõpsamissündmuse käitleja. See aitab meil tuvastada, kui klõpsame mõnel lehel. Siis peame kontrollima, kas klõpsatud sihtmärk erineb pakitud elemendist. Nii näeb põhistruktuur välja järgmine:

Esimese näite puhul alustame kodeerimist, kasutades React Classi stiili, ja siis reageerime sellele uue Hooks API abil.

Rakendasime kahte olelustsükli funktsiooni:

  • komponentDidMount (): lisab sündmuse kuulaja
  • komponentWillUnmount (): puhastab klikkide käitleja enne, kui komponent hävitatakse

ja siis muudame kõik, mis need komponendid ümber mähivad. Meie esimese ülaltoodud näite korral muudab see .

Tingimus „ClickOutside”

Nüüd peame kontrollima, kas kasutaja klõpsab väljaspool mähitud last. Üks naiivne lahendus on võrrelda sihtelementi (seda elementi, millele klõpsame) lapse sõlmega. Kuid see toimib ainult siis, kui meil on lapsena lihtne (ühetasandiline) sõlm. Kui meie pakitud lapsel on rohkem alamsõlmi, siis see lahendus ebaõnnestub.

Õnneks on olemas meetod nimega .contains (), mis annab meile teada, kas sõlm on antud sõlme laps. Järgmine samm on juurdepääsu saamine meie lapse sõlmele. Selle saavutamiseks kasutame React Refs.

Refs on Reacti viis anda meile juurdepääs toorsõlme objektile. Komponentide this.props.children käsitlemiseks kasutame ka Reacts API-d. Vajame seda API-t, kuna sisestame oma mähitud lapsele loodud viite. Seda silmas pidades näeb meie komponent välja järgmine:

Täiuslik, see peaks toimima ootuspäraselt. Vähemalt meie õnneliku voolu jaoks (üks mähitud laps). Kui kavatseme mähkida rohkem kui ühte sõlme, peame tegema mõned muudatused:

  • meil peab olema rida viiteid (nii palju kui meie pakitud lapsi)
  • peame iga lapse kloonimiseks kasutama React.Children.map ja sisestama sellega seotud viite meie eraviisilisest refräänist

See peaks hästi toimima. Vaatame seda nüüd konksude abil!

Konksud

React 16.8 tutvustas uut API-d nimega Hooks. Konksude abil saame kirjutada vähem koodi ja saada oma koodialusele väiksema jälje. Samuti kasutavad konksud ära funktsioone, mis on JavaScriptis esmaklassilised kodanikud. Kui tunnete kodakondsuseta funktsionaalseid komponente Reaktis, olete seal poole peal. Meie esialgne reflektor näeb välja selline:

Siiani oleme lihtsa kodakondsuseta funktsionaalse komponendi deklareerimiseks endiselt kasutanud “vana” React API-d. Kuid vajame neid elutsüklifunktsioone, et oma töötleja dokumendisõlmele kinnitada.

Siin on koht, kus Effect konks sisse tuleb. Effect konks asendab meie meetodeid “komponentDidMount” ja “komponentWillUnmount”. Efektikonks kutsutakse kohe pärast komponentide renderdamist, nii et see aitab meil soovitud käitleja õigel ajal kinnitada. Kui puhastusosa tagastab funktsiooni, kutsutakse see puhastusosa ka enne komponendi lahtivõtmist. Seega on just õige aeg teha mõned koristustööd. Järgmisel reflektoril saavad asjad natuke selgemaks.

See on meie funktsionaalse komponendi lõplik vorm, mis kasutab efektikonksu. Kui soovite näha mõlemat näidet tegevuses, saate neid allpool käitada. (Võite vaikimisi eksportida kas klassi komponendi või funktsionaalse komponendi ja rakendus käitub samamoodi.)

Järeldus

Isegi kui klõpsamise käitumine on laialt levinud funktsioon, ei pruugi see Reaktis seda nii lihtne olla. Selle näitega võin vabalt katsetada natuke React Hooksiga ja ehitada lahenduse kahel viisil kahe lähenemisviisi võrdlemiseks. Olen suur funktsionaalsete komponentide fänn ja nüüd saame Hookide abiga viia need järgmisele tasemele.