Vormiandmete töötlemine nupu vajutamisel Reactis

Eelmises õppetükis tegime nii, et sümboli sisestamisel inputisse kuvati tulemus koheselt lõigus. See muidugi paistab kena, kuid sellel on puudus.

Kujutagem ette, et peame tegema mõne "raskepärase", resursimahuka operatsiooni. Pole eriti optimaalne seda teha iga sümboli sisestamise korral - parem on oodata andmete lõplikku sisestamist ja siis teha vajalik operatsioon üks kord ja kuvada tulemus lõigus.

Selleks peame lisama nupu, mille vajutamisel teostatakse meie resursimahukas operatsioon. Sel juhul on meil jälle iga inputi jaoks oma state, pluss üks state on vajalik operatsiooni tulemuse salvestamiseks ja selle kuvamiseks ekraanil.

Vaatame näidet. Olgu meil kaks inputit ja nupp. Nupu vajutamisel leiame inputitesse sisestatud arvude summa.

Rakendame:

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

Saab kasutada lühendatud varianti:

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

Antud on kaks inputit, kaks nuppu ja lõik. Olgu inputitesse sisestatud numbrid. Esimese nupu vajutamisel leidke arvude summa, ja teise nupu vajutamisel - korrutis. Tulemus kuvatakse lõigus.

Antud on kaks inputit, nupp ja lõik. Olgu inputitesse sisestatud kuupäevad vormingus 2025-12-31. Nupu vajutamisel leidke erinevus kuupäevade vahel päevades ja kuvage tulemus lõigus.

Muutke eelmist ülesannet nii, et vaikimisi oleks inputites praegune kuupäev.

Antud on input ja lõik. Inputi sisestatakse number. Fookuse kaotamisel kuvatakse lõikus sisestatud numbri numbrite summa.

Antud on input ja lõik. Inputi sisestatakse number. Fookuse kaotamisel kuvatakse lõikus sisestatud numbri jagajate korrutis.