Za pomocą React.js i Angular zapisano funkcjonalnie równoważne kody źródłowe. Aby w metodzie handleSubmit można było wyświetlić zawartość kontrolki input w miejscu oznaczonym ??? należy odnieść się do atrybutu o nazwie

Poprawna odpowiedź: C (nazwa1)

Uzasadnienie i szersze wyjaśnienie:

Przeanalizujmy oba fragmenty kodu, aby zobaczyć, jak uzyskują dostęp do wartości pola input:

• W kodzie React.js:

  1. Tworzona jest referencja (ref) o nazwie nazwa1: nazwa1 = React.createRef();.
  2. Ta referencja jest przypisywana do pola input za pomocą specjalnego atrybutu ref: <input ref={this.nazwa1} ... />.
  3. W funkcji handleSubmit, aby uzyskać dostęp do elementu DOM, należy odwołać się do tej referencji. Prawidłowy kod to console.log(this.nazwa1.current.value);. Zatem w miejscu ??? należy wstawić nazwa1.

• W kodzie Angular:

  1. W formularzu (<form>) pole input ma atrybut name="nazwa1".
  2. W formularzach szablonowych (template-driven), obiekt ngForm (tutaj o nazwie f) ma właściwość value, która jest obiektem zawierającym wartości wszystkich kontrolek z atrybutem name.
  3. W funkcji handleSubmit, aby uzyskać dostęp do wartości pola input, należy odwołać się do klucza odpowiadającego jego atrybutowi name. Prawidłowy kod to console.log(f.value.nazwa1);. Zatem w miejscu ??? również należy wstawić nazwa1.

W obu przypadkach, aby poprawnie odwołać się do wartości kontrolki, należy użyć identyfikatora nazwa1.

Dlaczego pozostałe odpowiedzi są nieprawidłowe?

• nazwa2, nazwa3, nazwa4 to wartości innych atrybutów (name i id w React; id, class i for w Angular), które w przedstawionym kontekście nie służą do pobrania wartości w logice komponentu.