Čísla z textových polí

Textové pole pro čísla je input s type="number". Uživatel do něj napíše číslo, nebo kliká na jeho malé šipky. V Reactu se řídí jako každé jiné textové pole a z kurzu JavaScriptu víte, jaká je jeho hodnota: text. I když je v textovém poli 3, je event.target.value rovno "3".

Ve stavu si nechte text, jak ho textové pole dá, a na číslo ho převeďte pomocí Number() tam, kde s ním počítáte:

import { useState } from "react";

export default function App() {
    const [zetony, setZetony] = useState("1");
    const celkem = Number(zetony) * 80;

    return (
        <main>
            <label htmlFor="zetony">Žetony na pití, 80 Kč za kus</label>
            <input
                id="zetony"
                type="number"
                value={zetony}
                onChange={(event) => setZetony(event.target.value)}
            />
            <p>K zaplacení: {celkem} Kč</p>
        </main>
    );
}

Proč ve stavu nemít rovnou číslo, třeba pomocí setZetony(Number(event.target.value))? Kvůli chvíli, kdy je textové pole prázdné, třeba když uživatel smaže 1, aby napsal 4. Number("") je 0, takže by ve stavu byla 0 a textové pole by hned ukázalo 0. S textem ve stavu ukazuje textové pole přesně to, co uživatel napsal, a s číslem pracuje jen výpočet. Tam se prázdné textové pole počítá jako 0.

A proč vůbec Number()? * text na číslo převede samo, takže "3" * 3 je náhodou 9. Ale + ne: "3" + 1 je "31". S Number() si nemusíte pamatovat, co je co.