Kwalifikacja: INF.04 - Projektowanie, programowanie i testowanie aplikacji
Zawód: Technik programista
Kategorie: Programowanie Narzędzia i środowiska
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.???);
}
Odpowiedzi
Informacja zwrotna
To właśnie nazwa1 jest właściwym atrybutem, do którego trzeba się odwołać, żeby wyciągnąć wartość inputa zarówno w React, jak i w Angularze. W React, kiedy chcemy pobrać wartość z inputa przez refa, to przekazujemy ref={this.nazwa1}, a potem w handleSubmit robimy this.nazwa1.current.value. To po prostu dokładnie ta sama nazwa, którą przypisałeś do refa, nie ma tu żadnej magii. W Angularze z kolei input posiada ngModel oraz name="nazwa1" – i to name jest kluczowe, bo obiekt f.value generowany przez ngForm zawiera wszystkie pola po kluczach odpowiadających atrybutom name. Dzięki temu możesz potem użyć f.value.nazwa1 i dostajesz wartość inputa. W praktyce zawsze warto pilnować, żeby atrybut name był sensowny i jednoznaczny, bo to na nim opierają się frameworki przy serializacji danych formularza i obsłudze ich stanu. Moim zdaniem to jest jedna z bardziej praktycznych umiejętności przy pracy z dynamicznymi formularzami – jeśli ktoś nie dba o spójność nazw atrybutów name, to łatwo o błędy, które są potem trudne do wykrycia. Warto jeszcze pamiętać, że atrybuty typu id, class czy for mają zupełnie inne zastosowanie – służą do stylowania, powiązań z labelkami, itd. Name natomiast to podstawa logicznej obsługi wartości pól formularza. Często spotykam się z sytuacjami, że ktoś próbuje pobierać dane po id czy class, ale to nie jest zgodne z dobrymi praktykami – dla czytelności kodu i łatwości refaktoryzacji o wiele lepiej korzystać z name. Takie rozwiązania są też zalecane w oficjalnej dokumentacji zarówno React, jak i Angulara.