Przedstawiono funkcjonalnie równoważne fragmenty kodu aplikacji Angular oraz React.js.
| Angular | submit(f) { console.log(f.value); } <form #f="ngForm" (ngSubmit)="submit(f)"> <input ngModel name="tytul" type="text" id="tytul"> <button>Dodaj</button> </form> |
| React | handleSubmit = e => { e.preventDefault(); console.log('tytul: ' + e.currentTarget.tytul.value); }; render() { return ( <div> <form onSubmit={this.handleSubmit}> <input type="text" id="tytul" /> <button>Dodaj</button> </form> </div> ); } |
Oba fragmenty kodu, zarówno w Angularze jak i React.js, pokazują obsługę zdarzenia zatwierdzenia formularza. W Angularze zdarzenie submit jest obsługiwane poprzez przypisanie funkcji submit do atrybutu ngSubmit. Ta funkcja otrzymuje jako argument obiekt formularza, a następnie wypisuje jego wartość w konsoli za pomocą f.value. Jest to zgodne z dobrymi praktykami Angulara, gdzie korzysta się z dwukierunkowego wiązania danych i obiektu formularza do zarządzania danymi wejściowymi. W przypadku React.js funkcja handleSubmit jest przypisywana do zdarzenia onSubmit formularza. W tej funkcji nie tylko logujemy dane wejściowe, ale również używamy e.preventDefault(), aby zapobiec domyślnemu działaniu formularza, co jest standardową praktyką w React.js, gdzie zarządzamy stanem komponentów samodzielnie. W obu przypadkach kluczową czynnością jest reakcja na zdarzenie wysłania formularza, co pozwala na dalsze przetwarzanie danych wejściowych, walidację lub wysyłanie ich do serwera.
Błędne odpowiedzi wynikają z niepoprawnego zrozumienia, jak działa obsługa zdarzeń w obu frameworkach. W przypadku Angulara i React.js, kluczową rolą przedstawionego kodu jest obsługa zdarzenia zatwierdzenia formularza, a nie wypisywanie danych w czasie rzeczywistym. Odpowiedzi sugerujące wypisywanie danych w konsoli w czasie rzeczywistym mylnie interpretują mechanizm działania komponentów. Takie działanie wymagałoby implementacji dodatkowych funkcji, które nasłuchiwałyby na zmiany wprowadzane do pól formularza, np. za pomocą zdarzenia onChange w React.js. Kolejna błędna idea to przypisanie danych do zmiennych f lub e. W przedstawionych fragmentach kodu zmienne te służą do przechwytywania zdarzenia submit lub referencji formularza, a nie do przypisywania danych. Zrozumienie, że zmienne te są istotne dla obsługi zdarzeń, jest kluczowe. Ponadto zakładanie, że funkcje wypełniają dane podczas inicjacji formularza, jest niepoprawne. Takie działanie wiązałoby się z inicjalizacją wartości formularza, co w ukazanych przykładach nie ma miejsca, ponieważ celem jest przetwarzanie danych w momencie zatwierdzenia formularza. To typowy błąd wynikający z niepełnego zrozumienia przepływu danych i cyklu życia komponentów w nowoczesnych frameworkach JavaScriptowych.