Obdelava podatkov obrazca ob kliku na gumb v Reactu

V prejšnji lekciji smo naredili tako, da se je ob vnosu znaka v vnosno polje v odstavku takoj prikazal rezultat. To seveda izgleda lepó, vendar ima pomanjkljivost.

Predstavljajmo si, da moramo opraviti neko "težko", zahtevno operacijo. Ni zelo optimalno, da jo izvajamo ob vsakem vnosu znaka - bolje je počakati na končni vnos podatkov in nato izvesti zahtevano operacijo enkrat in rezultat prikazati v odstavku.

Za to moramo vnesti gumb, ob kliku na katerega bo izvedena naša zahtevna operacija. V tem primeru bo vsak vnos spet imel svoje stanje, plus eno stanje potrebujemo za zapis rezultata operacije in njegov prikaz na zaslonu.

Poglejmo si na primeru. Recimo, da imamo dva vnosa in gumb. Ob kliku na gumb poiščimo vsoto števil, vnešenih v vnose.

Izvedimo:

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

Lahko uporabite skrajšano različico:

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

Podana sta dva vnosa, dva gumba in odstavek. Naj se v vnose vnašajo števila. Ob kliku na prvi gumb poiščite vsoto števil, ob kliku na drugi gumb - produkt. Rezultat izpišite v odstavek.

Podana sta dva vnosa, gumb in odstavek. Naj se v vnose vnašajo datumi v formatu 2025-12-31. Ob kliku na gumb poiščite razliko med datumi v dnevih in rezultat izpišite v odstavek.

Spremenite prejšnjo nalogo tako, da privzeto v vnosih stoji trenutni datum.

Podan je vnos in odstavek. V vnos se vnese število. Ob izgubi fokusa izpišite v odstavek vsoto števk vnešenega števila.

Podan je vnos in odstavek. V vnos se vnese število. Ob izgubi fokusa izpišite v odstavek produkt deliteljev vnešenega števila.