React - локальний стейт

Всім привіт. Сьогодні ми поговоримо про типи даних в реактив. У реактив є 2 типу даних - це props і state. У цьому уроці ми розберемо що таке локальний стейт і як з ним працювати в react.

Якщо вам потрібно щоб якісь зміни відбувалися тільки всередині конкретної компоненти, то завжди варто використовувати локальний стейт.

Давайте спробуєм. І перше, що ми будемо реалізовувати це меню, що випадає.

Давайте створимо новий компонент Dropdown.js

Тепер нам потрібно цей компонент заімпортіть в App.js і вивести на екран.

Потрібно завжди пам'ятати 2 речі:

  1. Якщо ми хочемо, щоб return в render методі був багатостроковий потрібно обертати все, що ми хочемо повернути в круглі дужки.
  2. Повертати завжди можна тільки 1 елемент. Тобто ви не можете написати 2 діва на одному рівні. Щоб це працювало вам прийдется обернути їх ще в 1 див.

У браузері ми бачимо, що наш компонент вивівся на екран.

Давайте додамо змінну в стейт при ініціалізації компонента. Для цього ми просто додаємо constructor в клас.

Потрібно не забувати викликати метод super при ініціалізації так як перевизначаючи конструктор, нам потрібно не зламати додаток. Тут при просто при ініціалізації компонента створили змінну isOpened в Стейт і поставили її в false;

Давайте додамо onClick подія і метод, який буде Туглій isOpened змінну

Зверніть увагу, що в onClick метод передається без виклику, тобто без круглих дужок інакше він зголоситься одразу.

У toggleState ми викликаємо метод setState, який дозволяє нам змінювати стейт.

В консолі ми бачимо, що за замовчуванням isOpened = false. Якщо ж ми кликнемо на текст, то ми бачимо помилку

Це трапляється тому що функція this.toggleState викликається не в контексті класу і тому this є undefined.

Щоб змусити наш код працювати давайте прібіндім його до this

Як ми бачимо в консолі тепер значення змінюється при кліці на блок.

Давайте трохи змінимо розмітку, щоб у нас дійсно з'являвся блок на клік.

Тут ми сетім в змінну dropdownText значення, коли у нас isOpened = true. І виводимо змінну в фігурних дужках.

Як ми бачимо в браузері у нас з'являється і ховається блок при натисканні.