Obsługa zdarzeń: onClick i onChange

Cel: Obsługiwać kliknięcia i zmiany tekstu za pomocą zdarzeń syntetycznych React, zapewniających spójne działanie w różnych przeglądarkach.

• onClick wywołuje działania
• onChange odczytuje wartości pól wejściowych
• Obiekt zdarzenia zawiera szczegóły

Proszę podłączyć handler: onClick={handle}. Funkcje powinny być krótkie; stan należy aktualizować za pomocą setterów (jeśli używana jest poprzednia wartość, najlepiej skorzystać z funkcji aktualizującej).

onChange jest wywoływane, gdy użytkownik edytuje pole wejściowe. Tekst należy odczytać z event.target.value, a stan utrzymywać jako jedyne źródło prawdy.

Demo: zwiększanie wartości po kliknięciu, odzwierciedlanie tekstu pola za pomocą onChange oraz zapobieganie przeładowaniu po wysłaniu formularza za pomocą event.preventDefault().

Zdarzenia syntetyczne opakowują zdarzenia natywne, zapewniając spójność. Wartości należy odczytywać wewnątrz handlera, a same handlery utrzymywać krótkie i skoncentrowane na jednym zadaniu.

• W formularzach należy używać event.preventDefault()
• W polach wejściowych należy używać event.target.value

Wskazówki:

• Nie należy bezpośrednio modyfikować DOM; interfejsem powinien sterować stan.
• Należy unikać rozbudowanej logiki wpisanej bezpośrednio w handlery — lepiej wywoływać małe funkcje.
• Przy korzystaniu z poprzedniego stanu należy używać funkcji aktualizującej.

Podsumowanie: Do obsługi działań należy używać onClick, a do pól wejściowych — onChange; wartości należy odczytywać z event.target.value; w razie potrzeby trzeba zapobiegać domyślnemu przeładowaniu formularza.