ID: 3355 Web Średnie

Źródło: Arkusze CKE

Wykorzystując React.js oraz Angular, stworzono funkcjonalnie równoważne kody źródłowe. Aby móc w metodzie handleSubmit pokazać zawartość kontrolki input w miejscu oznaczonym ???, należy odwołać się do atrybutu o nazwie:
React.js:
nazwa1 = React.createRef();
handleSubmit = e => {
console.log(this.???.current.value);
}
...
<form onSubmit={this.handleSubmit}>
<input ref={this.nazwa1} name="nazwa2" id="nazwa3" for="nazwa4" />
Angular:
<form #f="ngForm" (ngSubmit) = "handleSubmit(f)">
<input ngModel name="nazwa1" id="nazwa2" class="nazwa3" for="nazwa4" >
...
handleSubmit(f) {
console.log(f.value.???);
}

Warianty odpowiedzi

  1. A

    nazwa1

  2. B

    nazwa4

  3. C

    nazwa2

  4. D

    nazwa3

Wyjaśnienie

W kodzie Reacta tworzymy referencję za pomocą React.createRef() i przypisujemy ją do zmiennej nazwa1. Aby pobrać jej wartość w metodzie, odwołujemy się do this.nazwa1.current.value.

W kodzie Angulara używamy formularza sterowanego szablonem. Kontrolka input posiada atrybut name o wartości nazwa1.

Obiekt formularza f.value w Angularze gromadzi wartości z pól, używając wartości z atrybutu name jako kluczy. Dlatego odwołanie ma postać f.value.nazwa1.

W obu przypadkach właściwym identyfikatorem jest 'nazwa1'.

Sprawdź się w praktyce

Rozwiąż pełny test próbny INF.04 albo wylosuj pojedyncze pytanie na szybką powtórkę.

Podobne pytania — Web