Źródło: Arkusze CKE
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>
);
}
Warianty odpowiedzi
-
A
funkcję, która zapisuje do zmiennych f lub e dane z pola <input> formularza
-
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 wypełnia dane w formularzu podczas jego inicjalizacji
-
D
obsługę zdarzenia przesłania formularza
Wyjaśnienie
Spójrz na te dwa kawałki kodu. Choć zapis różni się z powodu specyfiki frameworków, oba robią dokładnie to samo - przechwytują moment, w którym użytkownik klika przycisk wysłania formularza.
W Angularze odpowiada za to dyrektywa (ngSubmit), która wywołuje funkcję submit() z przekazaniem wartości formularza.
W React z kolei mamy zdarzenie onSubmit podpięte pod funkcję handleSubmit. Zwróć uwagę na metodę e.preventDefault() w React - jest kluczowa, bo zatrzymuje domyślne przeładowanie strony przez przeglądarkę.