ID: 3343
Web
Średnie
Źródło: Arkusze CKE
Kod w bibliotece React.js oraz w frameworku Angular, który został zaprezentowany, ma na celu wyświetlenie Fragment kodu React.js:
state = { zm1: 0 };
hanleEv = () => {
this.setState({zm1: this.state.zm1 + 1});
}
render() {
return (<div>
<span>{this.state.zm1}</span>
<button onClick={this.handleEv}>BTN_1</button>
</div>);
}
Fragment kodu Angular:
@Component({
selector: 'sel1',
template: <span>{{ zm1 }}</span>
<button (click)="onBtnCilcked()">BTN_1</button>
})
export class Licznik1Component {
zm1 = 0;
onBtnCilcked() { this.zm1++; }
}
Warianty odpowiedzi
-
A
wyłącznie przycisku oraz obsłużenie zdarzenia click, które ono generuje
-
B
liczby kliknięć przycisku
-
C
wartości 0 po naciśnięciu przycisku
-
D
tylko napisu BTN_1
Wyjaśnienie
Oba zaprezentowane fragmenty kodu realizują wzorzec klasycznego licznika i pokazują ten sam cel osiągnięty w dwóch różnych technologiach.
W kodzie Reacta mamy zmienną stanu 'zm1' ustawioną na 0 oraz funkcję, która po kliknięciu przycisku zwiększa jej wartość o 1 i odświeża widok.
W Angularze widzimy dokładnie ten sam mechanizm: zmienna 'zm1' jest inkrementowana w metodzie wywoływanej przez zdarzenie click. Przechowywana i wyświetlana w elemencie span wartość reprezentuje zatem łączną liczbę kliknięć w przycisk.