Pytanie 1
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> ); } |
A. funkcję, która wypełnia dane w formularzu podczas jego inicjalizacji
B. wyświetlanie w konsoli przeglądarki danych pobranych z pól formularza w czasie rzeczywistym, gdy użytkownik je wypełnia
C. funkcję, która zapisuje do zmiennych f lub e dane z pola <input> formularza
D. obsługę zdarzenia przesłania formularza
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.
