Spracovanie údajov formulára kliknutím na tlačidlo v Reacte

V predchádzajúcej lekcii sme robili to, že pri zadaní symbolu do vstupu sa v odseku okamžite zobrazil výsledok. To, samozrejme, vyzerá pekne, ale má to nevýhodu.

Predstavme si, že potrebujeme vykonať nejakú "ťažkú", náročnú operáciu. Nie je veľmi optimálne robiť ju pri každom zadaní symbolu - lepšie je počkať na konečné zadanie údajov a potom vykonať potrebnú operáciu raz a výsledok zobraziť v odseku.

Na to potrebujeme zaviesť tlačidlo, kliknutím na ktoré sa vykoná naša náročná operácia. V takom prípade bude mať každý vstup opäť svoj vlastný stav, plus jeden stav potrebujeme na zaznamenanie výsledku operácie a jeho zobrazenie na obrazovke.

Pozrime sa na príklad. Nech máme dva vstupy a tlačidlo. Kliknutím na tlačidlo nájdime súčet čísel zadaných do vstupov.

Realizujme:

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>;
}

Môžete použiť skrátenú verziu:

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>;
}

Sú dané dva vstupy, dve tlačidlá a odsek. Nech sa do vstupov zadávajú čísla. Kliknutím na prvé tlačidlo nájdite súčet čísel a kliknutím na druhé tlačidlo - súčin. Výsledok zobrazte do odseku.

Sú dané dva vstupy, tlačidlo a odsek. Nech sa do vstupov zadávajú dátumy vo formáte 2025-12-31. Kliknutím na tlačidlo nájdite rozdiel medzi dátumami v dňoch a výsledok zobrazte do odseku.

Upravte predchádzajúcu úlohu tak, aby štandardne vo vstupoch bola aktuálny dátum.

Je daný vstup a odsek. Do vstupu sa zadáva číslo. Pri strate focusu zobrazte do odseku súčet číslic zadaného čísla.

Je daný vstup a odsek. Do vstupu sa zadáva číslo. Pri strate focusu zobrazte do odseku súčin deliteľov zadaného čísla.