Lomaketietojen käsittely painiketta painamalla Reactissa

Edellisessä oppitunnissa teimme niin, että kun syötät merkin syöttökenttään, kappaleeseen ilmestyy välittömästi tulos. Se tietysti näyttää kauniilta, mutta siinä on haittapuoli.

Kuvitellaan, että meidän on tehtävä jonkinlainen "raskas", resursointialtis operaatio. Ei ole kovin optimaalista tehdä sitä jokaiselle syötetyn merkin kohdalla - on parempi odottaa, kunnes tiedot on syötetty loppuun, ja suorittaa sitten tarvittava operaatio kerran ja tulostaa tulos kappaleeseen.

Tätä varten meidän on lisättävä painike, jota painamalla resursointialtis operaatio suoritetaan. Tässä tapauksessa jokaisella syöttökentällä on jälleen oma tilansa, plus tarvitsemme vielä yhden tilan operaation tuloksen tallentamiseen ja sen näyttämiseen ruudulla.

Katsotaan esimerkkiä. Oletetaan, että meillä on kaksi syöttökenttää ja painike. Painiketta painamalla löydetään syöttökenttiin syötettyjen numeroiden summa.

Toteutetaan:

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

Voit käyttää lyhennettyä muotoa:

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

Annettu kaksi syöttökenttää, kaksi painiketta ja kappale. Syötä syöttökenttiin numeroita. Ensimmäistä painiketta painamalla etsi numeroiden summa, ja toista painiketta painamalla - numeroiden tulo. Tulosta tulos kappaleeseen.

Annettu kaksi syöttökenttää, painike ja kappale. Syötä syöttökenttiin päivämääriä muodossa 2025-12-31. Painiketta painamalla etsi päivämäärien välinen ero päivinä ja tulosta tulos kappaleeseen.

Muokkaa edellistä tehtävää siten, että oletusarvoisesti syöttökentissä on nykyinen päivämäärä.

Annettu syöttökenttä ja kappale. Syöttökenttään syötetään numero. Kohdistuksen menettäessä tulosta kappaleeseen syötetyn numeron numeroiden summa.

Annettu syöttökenttä ja kappale. Syöttökenttään syötetään numero. Kohdistuksen menettäessä tulosta kappaleeseen syötetyn numeron jakajien tulo.