Lekce 7 - Kalkulačka v React - Tvorba komponent

V minulé lekci, Kalkulačka v React - Projekt a rozdělení na komponenty, jsme vytvořili základ pro první jednoduchou kalkulačku za použití knihovny React.

V tomto React tutoriálu si postupně vytvoříme komponenty pro zadání čísla, vypsání výsledku a pro formulář kalkulačky.

Komponenta pro zadávání čísla – NumberInput.jsx

V nové složce src/calculator/ vytvoříme soubor NumberInput.jsx, který bude naší komponentou pro číselný vstup:

Bude tedy vykreslovat elementy <input>, <label> a obsluhovat událost změny čísla ve vstupním poli. Kód komponenty bude následující:

function NumberInput({ name, label, value, onChange }) {
    return (
        <label htmlFor={name}>
            {label}
            <input id={name}
                type="number"
                name={name}
                required
                onChange={(e) => onChange(parseFloat(e.target.value))}
                value={isFinite(value) ? value : ""}
            />
        </label>
    );
}

export default NumberInput;

Výhodou této komponenty je, že si generuje i <label> a nastavuje atributy, které bychom jinak museli nastavovat pro každé zadání čísla v aplikaci znovu.

Hned v deklaraci funkce komponenty jsme si destrukturalizovali vlastnosti. Ty komponentě nastavíme, až ji budeme vkládat do komponenty kalkulačky. Jsou to:

• name – Název číselného vstupu,
• label – Text popisku číselného vstupu,
• value – Zadaná hodnota,
• onChange – Funkce, kterou komponenta zavolá při změně své číselné hodnoty.

Dále vracíme výsledný HTML kód komponenty, který je rozepsaný na více řádek a proto je zapsaný v závorkách (). Také si všimněte, že je celý HTML kód uzavřený v jediném HTML elemementu (zde <label>), jinak by totiž JSX zápis nebyl validní.

Možná jste si také všimli, že místo atributu for u <label> používáme htmlFor. To proto, že když mixujeme HTML přímo do JavaScriptu, nesmíme zapomenout, že for je v JS rezervované klíčové slovo pro cyklus. JSX tedy místo něj zavádí náhradu, která se do výsledného HTML přeloží správně jako HTML atribut for. Ten, jak víme, určuje, ke kterému formulářovému prvku je štítek (<label>) vázán. Zde bychom jej ani zadávat nemuseli, protože vstupní pole je vložené přímo v labelu, ale ukázali jsme si, jak se v JSX zapisuje.

Reagování na změnu hodnoty

Pro získání uživatelem zadané hodnoty do vstupního pole <input> je potřeba reagovat na událost onChange. V React obsluhujeme události úplně stejně, jako v čistém JavaScriptu. Do atributu události HTML elementu (onSubmit, onChange apod.) jednoduše nastavíme funkci, která se zavolá, když událost nastane.

Atributu onChange vstupního pole <input> proto předáváme arrow funkci s jedním parametrem e, který obsahuje informaci o provedené změně. V této funkci voláme naši funkci onChange() předanou jako vlastnost komponenty NumberInput. Hodnota e.target.value je potom hodnota zadaná uživatelem ve vstupním poli. Tato hodnota je však řetězec, proto ji před předáním do naší funkce onChange() nejprve parsujeme na číslo.

Místo deklarace arrow funkce bychom stejně tak mohli deklarovat i handler funkci pomocí klíčového slova function. Jelikož v handleru potřebujeme zavolat jen naši funkci onChange(), používáme kratší variantu.

Vstupnímu poli nakonec ještě nastavujeme aktuální hodnotu value předanou naší komponentě NumberInput. Funkcí isFinite() kontrolujeme, zda se jedná o validní konečné číslo, které lze vstupnímu poli nastavit. Jinak nastavujeme prázdný řetězec.

Komponenta pro zobrazení výsledku – Result.jsx

Ve složce src/calculator/ vytvoříme další soubor, Result.jsx, který bude komponentou pro výsledek:

Výsledek si zobrazíme jednoduše v elementu <div>. Kód komponenty bude následující:

function Result({value}) {
    if (value !== null)
        return <div className="Result">Výsledek: {value}</div>;
    return null;
}

export default Result;

Výsledek má jen jednu vlastnost a tou je vypisovaná hodnota.

Jelikož dále budeme chtít na výsledek aplikovat CSS, přidáme mu HTML atribut class. Ovšem opět se jedná v JS o rezervované slovo, takže v JSX namísto toho použijeme atribut className, který se pak vyrenderuje jako atribut class. Ten se také používá v souvislosti s označením samotných komponent, a proto za účelem přehlednosti zvolíme stejný název CSS třídy, jako je název komponenty.

Dále stojí za povšimnutí, že v komponentě vracíme null, pokud výsledek není zadaný a my nic nevyrenderujeme. Pokud komponenta nemá nic vykreslit, měla by vracet null – přeci jen nějakou hodnotu vracet musí.

Komponenta s formulářem kalkulačky – CalculatorForm.jsx

Nyní, když už máme příslušné součásti, můžeme vytvořit centrální komponentu aplikace – formulář CalculatorForm.jsx. Soubor opět vytvoříme do podsložky calculator/ v src/. Formulář s kalkulačkou bude tvořený elementem <form>. Dále bude obsahovat námi výše vytvořené komponenty a samozřejmě odesílací tlačítko typu submit, aby se formulář dal odeslat:

Kód komponenty bude následující:

import NumberInput from "./NumberInput";
import Select from "react-select";
import Result from "./Result";

function CalculatorForm() {
    return (
        <div>
            <form className="CalculatorForm">
                <NumberInput name="a" label="První číslo:" />
                <NumberInput name="b" label="Druhé číslo:" />
                <Select options={[]} />
                <input type="submit" value="Spočítej" />
            </form>
            <Result />
        </div>
    );
}

export default CalculatorForm;

Potřebné komponenty jsme na začátku souboru naimportovali.

Při vykreslení formuláře vidíme krásné a jednoduché složení React aplikace z komponent, které jsme vytvořili před chvílí. Všimněte si, že jsme při vložení našich komponent do formuláře nastavili některé jejich vlastnosti. Zbytek vlastností, např. hodnota čísel nebo výsledek, se bude nastavovat podle stavů kalkulačky, které přidáme dále v kurzu. Vidíme zde i použití komponenty <Select />, kterou jsme si při zakládání projektu nainstalovali v rámci balíčku react-select. Selectu jsme nastavili jeho možnosti options zatím na prázdné pole [], možnosti k výběru dodáme opět později v kurzu.

Komponenta celé aplikace – src/App.jsx

Nakonec tedy upravíme samotnou komponentu naší aplikace. Odmažeme zbytečné zbytky výchozí React šablony a vložíme sem náš formulář s kalkulačkou:

import CalculatorForm from "./calculator/CalculatorForm";
import "./App.css";

const title = "React kalkulačka";

function App() {
    return (
        <div className="App">
            <h1>{title}</h1>
            <CalculatorForm />
        </div>
    );
}

export default App;

Opět nic složitého. Jediná zajímavá věc v kódu je nastavení hodnoty nadpisu přes konstantu pomocí syntaxe {}, a je to opět velice přímočaré.

A to je vše. Když si teď spustíme aplikaci, v prohlížeči se zobrazí odpovídající HTML struktura:

V příští lekci, Kalkulačka v React - Utility funkce a stavy, se naučíme používat utility funkce a definujeme stavy naší aplikace pomocí React hook useState().

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.