react js

Stan komponentu – przykład kalkulatora

Jeśli odrobiłeś poprzednią lekcję to teraz zrobimy prosty kalkulator i utrwalimy wiedzę związaną ze stanami komponentów. Analogiczny kalkulator, ale w języku JavaScript opisałem w tutorialu: „KALKULATOR W JS”. Porównaj oba rozwiązania 🙂

kalkulator

Gotowy kod:

Wyjaśnienie:

  • W konstruktorze ustawiamy początkowe stany (state) dla pól tekstowych (input type=”text”): a, b i result. Wiążemy (bind) funkcje (handleChangeA, handleChangeB, handleCalculate) z instancją komponentu Calculator.

  • Funkcja handleChangeA – reaguje na zdarzenie onChange pola tekstowego z przypisanym stanem a; e.target.value – zwraca wartość pola input, na którym wywołano zdarzenie (e = event):

  • Funkcja handleChangeB – reaguje na zdarzenie onChange pola tekstowego z przypisanym stanem b:

  • Funkcja handleCalculate – oblicza i przekazuje wynik operacji matematycznych do this.state.result. Funkcja ta reaguje na zdarzenie onClick poszczególnych przycisków:

Kod funkcji:

  • e.preventDefault() – wyłącza akcję na obiekcie, tzn. że po kliknięciu przycisku nie nastąpi przeładowanie strony. Instrukcja switch jako argument pobiera treść klikniętego przycisku (e.target.innerText), wykonuje odpowiednią operację matematyczną i aktualizuje stan – this.setState:

Wynik (this.state.result) jest wyświetlany w polu input:

 

wydrukuj temat