Mam dla Ciebie szybki temat: responsywne kliknięcie w React. Ja wiem, co myślisz. Błahostka. Taki tam drobiazg. Banał. A więc… do dzieła!
<div onClick={this.myHandle}> ...Myślisz, że wszystko jest ok. Jednak przychodzi ten pamiętny dzień, kiedy dostajesz buga od testera „Kliknięcie nie działa na iOS”.
Przeciętny programista nie myśli teraz w kontekście „skąd się bierze problem”, tylko „jak go naprawić”. Przeciętny programista dumnie pisze:
<div
onClick={this.myHandle}
onTouchStart={this.myHandle}
> ... Działa? Działa. Ale dobry programista testuje swoje poprawki. Czy aby na pewno jego zmiana jest całkowicie nieszkodliwa dla aplikacji…?
No i d**a. Dobry programista dosyć szybko zauważa, że metoda myHandle wywołuje się 2 razy na wszystkich znanych i lubianych mobilnych przeglądarkach. Problem pojawia się również na laptopach z dotykowych ekranem. I Bóg wie, gdzie jeszcze. Co tu się dzieje? Jednocześnie wywołuje się zarówno onClick, jak i onTouchStart! Nie o takie zachowanie nam chodzi.
Myślisz dalej. Wchodzisz do funkcji. Oblewa Cię delikatny zimny dreszcz, w powietrzu czujesz nadchodzącą rozpacz. W akcie desperacji piszesz:
myHandle (evt) {
evt.preventDefault()
...
}
...
<div onClick={(e) => this.myHandle(e)} onTouchStart={(e) => this.myHandle(e)}>...Nope. To nie zadziała. A jak zadziała, to przez przypadek. Pogubiłeś się programisto. Wróć na początek.
<div onClick={this.myHandle}> ...Pomęczyłam Ciebie, Programisto. Kazałam Ci myśleć. A to bez sensu. Czasem trzeba po prostu… wpisać problem w google. Ja tak zrobiłam i znalazłam rozwiązanie, na które sama bym nie wpadła. Otóż, umęczony poszukiwaniem rozwiązania Programisto – gdzie JS nie może, tam CSSa pośle. Dodaj do nieszczęsnego diva taki oto styl:
cursor: pointer;Ufff. I po problemie! Responsywne kliknięcie okazało się niezłym wyzwaniem, jednak ogarnęliśmy temat. Szczegóły dla zainteresowanych dla githubie.
