Obrada podataka forme klikom na dugme u React-u

U prethodnoj lekciji smo radili tako da se pri unosu karaktera u input polje, rezultat momentano pojavljuje u pasusu. Ovo, naravno, izgleda lepo, ali ima nedostatak.

Zamislimo da treba da obavimo neku "tešku", resursno zahtevnu operaciju. Nije baš optimalno da je obavljamo pri svakom unosu karaktera - bolje je sačekati konačan unos podataka i zatim izvršiti potrebnu operaciju jednom i rezultat prikazati u pasusu.

Za ovo nam treba dugme, čijim klikom će se obavljati naša resursno zahtevna operacija. U ovom slučaju ćemo opet imati da svakom input polju odgovara svoje stanje (state), plus još jedno stanje nam treba za upis rezultata operacije i za prikaz na ekranu.

Pogledajmo na primeru. Neka imamo dva input polja i dugme. Klikom na dugme hajde da nađemo zbir brojeva unešenih u input polja.

Implementirajmo:

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

Može se koristiti i skraćena varijanta:

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

Data su dva input polja, dva dugmeta i pasus. Neka se u input polja unose brojevi. Klikom na prvo dugme nađite zbir brojeva, a klikom na drugo dugme - proizvod. Rezultat prikažite u pasusu.

Data su dva input polja, dugme i pasus. Neka se u input polja unose datumi u formatu 2025-12-31. Klikom na dugme nađite razliku između datuma u danima i rezultat prikažite u pasusu.

Modifikujte prethodni zadatak tako da podrazumevano u input poljima stoji trenutni datum.

Dat je input i pasus. U input se unosi broj. Pri gubitku fokusa (blur) prikažite u pasusu zbir cifara unešenog broja.

Dat je input i pasus. U input se unosi broj. Pri gubitku fokusa prikažite u pasusu proizvod delilaca unešenog broja.