Adatfeldolgozás űrlapon gombnyomásra Reactben

Az előző leckében úgy csináltuk, hogy amikor egy karaktert írtunk be egy input mezőbe, azonnal megjelent az eredmény egy bekezdésben. Ez persze szép megoldás, de van egy hátránya.

Képzeljük el, hogy valamilyen "nehéz", erőforrásigényes műveletet kell végrehajtanunk. Nem túl optimális ezt minden egyes beírt karakter után elvégezni - jobb, ha megvárjuk a végső adatbevitelt, majd egyszer hajtjuk végre a szükséges műveletet, és az eredményt jelenítjük meg a bekezdésben.

Ehhez szükségünk van egy gombra, amelyre kattintva elvégződik az erőforrásigényes műveletünk. Ebben az esetben is minden input mezőhöz tartozni fog egy saját állapot, plusz még egy állapotra van szükségünk a művelet eredményének rögzítéséhez és a képernyőn való megjelenítéséhez.

Nézzünk egy példát. Tegyük fel, hogy van két input mezőnk és egy gomb. A gomb megnyomásakor keressük meg az input mezőkbe beírt számok összegét.

Valósítsuk meg:

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

Használhatunk rövidített változatot is:

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

Adott két input mező, két gomb és egy bekezdés. Az input mezőkbe számok írhatók. Az első gomb megnyomására keresse meg a számok összegét, a második gomb megnyomására pedig a szorzatát. Az eredményt jelenítse meg a bekezdésben.

Adott két input mező, egy gomb és egy bekezdés. Az input mezőkbe 2025-12-31 formátumú dátumok írhatók. A gomb megnyomására keresse meg a dátumok különbségét napokban, és az eredményt jelenítse meg a bekezdésben.

Módosítsa az előző feladatot úgy, hogy alapértelmezetten az input mezőkben az aktuális dátum álljon.

Adott egy input mező és egy bekezdés. Az input mezőbe egy szám írható. Fókuszvesztéskor jelenítse meg a bekezdésben a beírt szám számjegyeinek összegét.

Adott egy input mező és egy bekezdés. Az input mezőbe egy szám írható. Fókuszvesztéskor jelenítse meg a bekezdésben a beírt szám osztóinak szorzatát.