State służy do przechowywania wewnętrznego stanu komponentu, np: ilość kliknięć w dany element na stronie. Stan jest aktualizowany w czasie rzeczywistym za pomocą metody setState(). Aby to zrozumieć zobacz prosty przykład, który przygotowałem.

W przykładzie – użytkownik wprowadza treść do pola tekstowego input ; łańcuch znaków jest „na bieżąco” przepisywany do paragrafu <p></p>, a po kliknięciu na przycisk button wyświetli się również w nagłówku <h2></h2>.

Rozwiązanie:

W konstruktorze constructor(props) ustawiamy początkowe stany do zadania:

  • result1 – treść, która pojawi się w paragrafie <p></p>
  • result2 – treść, która pojawi się w nagłówku <h2></h2>

Metoda super() wywołuje konstruktor klasy nadrzędnej, z której dziedziczy – czyli klasy React.component.

W zadaniu są nam potrzebne dwie funkcje (np: handleChange, handleClick), które będą reagowały na zdarzenia (onChange i onClick) kontrolek formularza:

W konstruktorze są jedynie zadeklarowane, a bind wiąże instancję komponentu z daną funkcją:

Obie funkcje zawierają setState, które ustawiają bieżące stany dla result1 i result2:

W przypadku tej pierwszej, e.target.value – zwróci wartość pola input, na którym wywołano zdarzenie (e = event). W drugiej metodzie korzystamy z e.preventDefault(), co pozwoli anulować akcję na obiekcie, tzn. że po kliknięciu przycisku nie nastąpi przeładowanie strony 🙂 a jedynie zostanie zaktualizowany setState – stan argumentu result2.

I to wszystko 🙂
Do następnego! –>