Formulářové prvky jako textová polížka, zaškrtávací tlačítka apod. jsou jedním z hlavních způsobů, jak získat vstup od uživatele. V čístém JavaScritpu jsme zvyklí získávat hodnoty z těchto prvků tak, že je vybereme pomocí querySelector a použijeme například vlastnost value.

const inputElm = document.querySelector('input');
const value = inputElm.value;

V Reactu však k DOM elementům na stránce přístup nemáme. Hodnotu uvnitř textového políčka si tak musíme uložit do stavu.

Představme si jednoduchou komponentu, kde uživatel zadá svůj věk.

const AgeField = () => {
  return (
    <label>
      Zadej svůj věk:
      <input type="text" />
    </label>
  );
};

Hodnotu uvnitř elementu input si chceme uložit do stavu pokaždé, když dojde k její změně. Vytvoříme si proto stav age a budeme jej měnit v reakci na událost onChange.

const AgeField = () => {
  const [age, setAge] = useState(null);

  return (
    <label>
      Zadej svůj věk:
      <input type="text" onChange={(e) => setAge(e.target.value)} />
    </label>
  );
};

Tímto postupem se snažíme provázat obsah políčka s hodnotou ve stavu. Kdykoliv uživatel obsah políčka změní, my na to zareagujeme změnou stavu age. Tomuto principu se anglicky říká data binding.

Pozor však, že náš data binding zatím funguje pouze jedním směrem, tedy změna políčka ⟶ změna stavu. Pokud se z nějakého důvodu změní hodnota ve stavu age, obsah políčka se zatím neaktualizuje.

Obousměrný data binding

To, co jsme viděli v ukázce výše bychom mohli nazvat one-way (jednosměrný) data binding. V praxi však téměř vždy budeme chtít takzvaný two-way (obousměrný) data binding. Ten zařídíme jednoduše tak, že hodnotu ve stavu vždy nastavíme jako hodnotu políčka.

const AgeField = () => {
  const [age, setAge] = useState(null);

  return (
    <label>
      Zadej svůj věk:
      <input type="text" value={age} onChange={(e) => setAge(e.target.value)} />
    </label>
  );
};

Takto zajistíme provázanost i druhým směrem, tedy změna stavu ⟶ změna políčka.

V mírně komplikovanějších React aplikacích brzy narazíme na potřebu zareagovat na určité situace, které nastávají během vykreslování (renderování) komponenty. Budeme chtít například spustit nějaký kód ve chvíli, kdy se komponenta poprvé objeví na stránce. Čas od času také budeme chtít v komponentě provést něco ve chvíli, kdy se změní hodnota v props nebo ve stavu. K tomuto nám v Reactu slouží takzvané efekty effects .

Efekty jsou v podstatě velmi podobné událostem. Ve chvíli, kdy uvnitř komponenty něco nastane, budeme chtít zavolat naši funkci. Jako příklad si vyrobíme jednoduchou aplikaci, která řiká, kdo má zrovna svátek.

import React from 'react';
import { render } from 'react-dom';
import './index.html';

const App = () => {
  return (
    <>
      <h1>Svátky</h1>
      <div className="nameday">Svátek má Jiří</div>
    </>
  );
};

render(<App />, document.querySelector('#app'));

Pokud bychom chtěli spustit kousek kódu ve chvíli, kdy se naše komponenta App objeví na stránce, použijeme funkci useEffect a té předáme námi vytvořenou funkci.

import React, { useEffect } from 'react';
import { render } from 'react-dom';
import './index.html';

const App = () => {
  useEffect(() => console.log('jsem tady'), []);

  return (
    <>
      <h1>Svátky</h1>
      <div className="nameday">Svátek má Jiří</div>
    </>
  );
};

render(<App />, document.querySelector('#app'));

Funkce useEffect má dva parametry. Prvním je funkce, která se má zavolat a druhý parametr říká, za jakých okolností se má naše funkce volat. Prázdné pole [] znamená, že se efekt spustí pouze ve chvíli, kdy se komponenta poprvé objeví na stránce.

Pokud chceme v naší aplikaci zobrazovat data z nějakého API, musíme si tato data stáhnout pomocí nám již známé funkce fetch. Tuto funkci je nejlepší zavolat právě ve chvíli, kdy se naše komponenta poprvé objeví na stránce.

Naše poslední aplikace zatím zobrazovala, že svátek má Jiří. To je však pravda pouze jeden den v roce. Pojďme aplikace vylepšit tak, aby si stáhla aktuální jméno z API.

import React, { useState, useEffect } from 'react';
import { render } from 'react-dom';
import './index.html';

const App = () => {
  const [name, setName] = useState('');

  useEffect(() => {
    fetch('https://api.abalin.net/today?country=cz')
      .then((resp) => resp.json())
      .then((json) => setName(json.data.namedays.cz)
  }, []);

  return (
    <>
      <h1>Svátky</h1>
      <div className="nameday">Svátek má {name}</div>
    </>
  );
};

render(<App />, document.querySelector('#app'));

V tomto případě jsme si do stavu ukládali pouze obyčejný řetězec. Naše data však budou často zobrazovat seznamy, takže budeme chtít mít ve stavu uložené nějaké pole.

https://worldtimeapi.org/api/timezone