Zpracování dat formuláře po kliknutí na tlačítko v Reactu

V předchozí lekci jsme dělali to, aby při zadání znaku do inputu se v odstavci okamžitě objevil výsledek. To samozřejmě vypadá hezky, ale má to nevýhodu.

Představme si, že potřebujeme provést nějakou "těžkou", náročnou operaci. Není příliš optimální ji dělat při každém zadání znaku - je lepší počkat na konečné zadání dat a poté provést požadovanou operaci jednou a výsledek zobrazit v odstavci.

K tomu potřebujeme zavést tlačítko, po jehož kliknutí se provede naše náročná operace. V tomto případě budeme mít opět každému inputu bude odpovídat jeho stav, plus ještě jeden stav potřebujeme pro zápis výsledku operace a jeho zobrazení na obrazovce.

Podívejme se na příklad. Předpokládejme, že máme dva inputy a tlačítko. Po kliknutí na tlačítko najděme součet čísel zadaných do inputů.

Implementujme:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return <div>
		<input value={value1} onChange={handleChange1} />
		<input value={value2} onChange={handleChange2} />
		
		<button onClick={handleClick}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Lze použít zkrácenou variantu:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	return <div>
		<input value={value1} onChange={event => setValue1(event.target.value)} />
		<input value={value2} onChange={event => setValue2(event.target.value)} />
		
		<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Jsou dány dva inputy, dvě tlačítka a odstavec. Nechť se do inputů zadávají čísla. Po kliknutí na první tlačítko najděte součet čísel a po kliknutí na druhé tlačítko - součin. Výsledek vypisujte do odstavce.

Jsou dány dva inputy, tlačítko a odstavec. Nechť do inputů se zadávají data ve formátu 2025-12-31. Po kliknutí na tlačítko najděte rozdíl mezi dny ve dnech a výsledek vypište do odstavce.

Upravte předchozí úlohu tak, aby ve inputech byla standardně aktuální datum.

Je dán input a odstavec. Do inputu se zadává číslo. Po ztrátě focusu vypište do odstavce součet číslic zadaného čísla.

Je dán input a odstavec. Do inputu se zadává číslo. Po ztrátě focusu vypište do odstavce součin dělitelů zadaného čísla.