Како детектовати кликове изван реаговане компоненте помоћу прилагођене куке

Многи кориснички интерфејси користе компоненте које се појављују на основу догађаја као што је клик на дугме. Када радите са таквом компонентом, пожелећете начин да је поново сакријете, обично као одговор на клик изван њене границе.

Овај образац је посебно користан за компоненте као што су модали или клизни менији.

Руковање кликовима изван елемента

Под претпоставком да имате следеће ознаке у својој апликацији и желите да затворите унутрашњи елемент када кликнете на спољашњи елемент:

<ОутерЕлемент>
<ИннерЕлемент/>
ОутерЕлемент>

Да бисте управљали кликовима изван елемента, потребно је прикључите слушаоца догађаја до спољашњег елемента. Затим, када дође до клика, приступите објекту догађаја и испитајте његово циљно својство.

Ако циљ догађаја не садржи унутрашњи елемент, то значи да догађај клика није покренут унутар унутрашњег елемента. У овом случају, требало би да уклоните или сакријете унутрашњи елемент из ДОМ-а.

Ово је објашњење високог нивоа како поступате са кликовима изван елемента. Да бисте видели како би ово функционисало у Реацт апликацији, мораћете креирајте нови Реацт пројекат користећи Вите.

Можете креирати пројекат користећи друге методе или једноставно користити постојећи пројекат.

Руковање кликовима изван елемента у Реацт апликацији

У основи вашег пројекта креирајте нову датотеку под називом Хоме.јск и додајте следећи код да бисте направили див који би требало да се сакрије када кликнете на елемент одељка.

увоз { усеЕффецт, усеРеф } из"реаговати";
извозконст Почетна = () => {
конст оутерРеф = усеРеф();
 усеЕффецт(() => {
конст хандлеЦлицкОутсиде = (е) => {
ако (оутерРеф.цуррент && !оутерРеф.цуррент.цонтаинс (е.таргет)) {
// Сакриј див или изврши било коју жељену радњу
 }
 };
документ.аддЕвентЛистенер("кликни", хандлеЦлицкОутсиде);
повратак() => {
документ.ремовеЕвентЛистенер("кликни", хандлеЦлицкОутсиде);
 };
 }, []);
повратак (

ширина: "200пк", висина: "200пк", позадини: "#000" }} реф={оутерРеф}></div>
 </section>
 );
};

Овај код користи куку усеРеф за креирање објекта под називом оутерРеф. Затим упућује на овај објекат преко својства реф елемента див.

Можете користити усеЕффецт кука за додавање слушаоца догађаја на страницу. Слушалац овде назива хандлеЦлицкОутсиде функција када корисник покрене догађај клика. Тхе усеЕффецт хоок такође враћа функцију чишћења која уклања слушалац догађаја када се компонента Хоме искључи. Ово осигурава да нема цурења меморије.

Функција хандлеЦлицкОутсиде проверава да ли је циљ догађаја елемент див. Референтни објекат пружа информације о елементу на који упућује у објекту који се зове цуррент. Можете га проверити да видите да ли је елемент див покренуо слушаоца тако што ћете потврдити да не садржи евент.таргет. Ако није, можете сакрити див.

Креирање прилагођене куке за руковање кликовима изван компоненте

Прилагођена кука би вам омогућила да поново користите ову функционалност у више компоненти без потребе да је сваки пут дефинишете.

Ова кука треба да прихвати два аргумента, функцију повратног позива и реф објекат.

У овој кукици, функција повратног позива је функција која се позива када кликнете на простор изван циљног елемента. Референтни објекат упућује на спољну компоненту.

Да бисте креирали куку, додајте нову датотеку под називом усеЦлицкОутсиде свом пројекту и додајте следећи код:

увоз { усеЕффецт } из"реаговати";
извозконст усеОутсидеЦлицк = (повратни позив, реф) => {
конст хандлеЦлицкОутсиде = (догађај) => {
ако (реф.цуррент && !реф.цуррент.цонтаинс (евент.таргет)) {
 позове();
 }
 };
 усеЕффецт(() => {
документ.аддЕвентЛистенер("кликни", хандлеЦлицкОутсиде);
повратак() => {
документ.ремовеЕвентЛистенер("кликни", хандлеЦлицкОутсиде);
 };
 });
};

Ова кука ради на исти начин као претходни пример кода, који је детектовао спољне кликове унутар компоненте Хоме. Разлика је у томе што је за вишекратну употребу.

Да бисте га користили, увезите га у почетну компоненту и проследите функцију повратног позива и реф објекат.

конст хидеДив = () => {
конзола.Пријава(„Скривени див“);
};
усеОутсидеЦлицк (цлосеМодал, оутерРеф);

Овај приступ апстрахује логику откривања кликова изван елемента и чини ваш код лакшим за читање.

Побољшајте корисничко искуство откривањем кликова изван компоненте

Било да се ради о затварању падајућег менија, одбацивању модалног или промену видљивости одређених елемената, откривање кликова изван компоненте омогућава интуитивно и беспрекорно корисничко искуство. У Реацт-у можете користити реф објекте и кликнути на обрађиваче догађаја да бисте креирали прилагођену куку коју можете поново користити у својој апликацији.