Oto podstawowy element. Obie funkcje <ul>
i <li>
mają onClick. Chcę tylko onClick, <li>
aby odpalić, a nie <ul>
. Jak mogę to osiągnąć?
Bawiłem się z e.preventDefault (), e.stopPropagation (), ale bezskutecznie.
class List extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
// do something
}
render() {
return (
<ul
onClick={(e) => {
console.log('parent');
this.handleClick();
}}
>
<li
onClick={(e) => {
console.log('child');
// prevent default? prevent propagation?
this.handleClick();
}}
>
</li>
</ul>
)
}
}
// => parent
// => child
reactjs
onclick
event-propagation
dmwong2268
źródło
źródło
Odpowiedzi:
Miałem ten sam problem. Okazało się, że stopPropagation zadziałało. Podzieliłbym element listy na osobny komponent, tak jak:
źródło
this.props.handleClick()
wListItem
komponenciethis.props.click
?<Link>
React używa delegowania zdarzeń z jednym nasłuchiwaniem w dokumencie dla zdarzeń, które są w dymku, jak np. „Kliknięcie” w tym przykładzie, co oznacza, że zatrzymanie propagacji nie jest możliwe; rzeczywiste wydarzenie zostało już rozpropagowane do czasu interakcji z nim w Reakcie. stopPropagation na syntetycznym zdarzeniu Reacta jest możliwe, ponieważ React wewnętrznie obsługuje propagację zdarzeń syntetycznych.
źródło
document.addEventListener('click')
kombinacji zonClick
W kolejności zdarzeń DOM: CAPTURING vs BUBBLING
Istnieją dwa etapy propagacji wydarzeń. Nazywa się to „przechwytywaniem” i „bulgotaniem” .
Najpierw następuje etap przechwytywania, a po nim faza bulgotania. Gdy rejestrujesz zdarzenie przy użyciu zwykłego interfejsu API DOM, zdarzenia będą domyślnie częścią etapu propagacji, ale można to określić podczas tworzenia zdarzenia
W Reakcie zdarzenia bulgotania są również używane domyślnie.
Rzućmy okiem na nasz uchwyt handleClick callback (React):
Alternatywa, o której tutaj nie wspomniałem
Jeśli wywołasz e.preventDefault () we wszystkich swoich zdarzeniach, możesz sprawdzić, czy zdarzenie zostało już obsłużone i uniemożliwić ponowne obsłużenie:
Aby zobaczyć różnicę między zdarzeniami syntetycznymi i natywnymi, zobacz dokumentację React: https://reactjs.org/docs/events.html
źródło
Nie jest to w 100% idealne, ale jeśli jest to zbyt trudne do przekazania
props
dzieciom -> moda dziecięca lub tworzenieContext.Provider
/Context.Consumer
tylko w tym celu), a masz do czynienia z inną biblioteką, która ma własny program obsługi, który działa przed Twoim możesz też spróbować:Z tego, co rozumiem,
event.persist
metoda zapobiega natychmiastowemu wrzuceniu obiektu z powrotem doSyntheticEvent
puli Reacta . Z tego powoduevent
przekazany w Reactcie właściwie nie istnieje, zanim po niego sięgniesz! Dzieje się tak u wnuków ze względu na sposób, w jaki React radzi sobie z rzeczami wewnętrznie, najpierw sprawdzając, czy rodzic nie maSyntheticEvent
obsługi (zwłaszcza jeśli rodzic miał wywołanie zwrotne).Tak długo, jak nie wywołujesz
persist
czegoś, co stworzyłoby znaczną pamięć do tworzenia wydarzeń, takich jakonMouseMove
(i nie tworzysz jakiejś gry typu Cookie Clicker, takiej jak Grandma's Cookies), wszystko powinno być w porządku!Uwaga: czytając od czasu do czasu ich GitHub, powinniśmy wypatrywać przyszłych wersji Reacta, ponieważ mogą one ostatecznie rozwiązać niektóre problemy związane z tym, ponieważ wydaje się, że zmierzają do składania kodu React w kompilatorze / transpilerze.
źródło
Miałem problemy z rozpoczęciem
event.stopPropagation()
pracy. Jeśli to zrobisz, spróbuj przenieść go na górę funkcji obsługi kliknięcia, to właśnie musiałem zrobić, aby zatrzymać bulgotanie zdarzenia. Przykładowa funkcja:źródło
Możesz uniknąć bulgotania zdarzenia, sprawdzając cel zdarzenia.
Na przykład, jeśli masz dane wejściowe zagnieżdżone w elemencie div, w którym masz moduł obsługi zdarzenia kliknięcia, i nie chcesz go obsługiwać, po kliknięciu wejścia możesz po prostu przekazać
event.target
do swojego modułu obsługi i sprawdzić, czy funkcja obsługi powinna zostać wykonana na podstawie właściwości celu.Na przykład możesz sprawdzić
if (target.localName === "input") { return}
.Jest to więc sposób na „uniknięcie” wykonania procedury obsługi
źródło
Nowy sposób jest dużo prostszy i pozwoli Ci zaoszczędzić trochę czasu! Po prostu przekaż zdarzenie do oryginalnego modułu obsługi kliknięć i wywołaj
preventDefault();
.źródło