Formos duomenų apdorojimas paspaudus mygtuką React

Ankstesnėje pamokoje mes darėme taip, kad įvedus simbolį į įvesties lauką, pastraipoje akimirksniu atsirastų rezultatas. Tai, žinoma, atrodo gražiai, bet turi trūkumą.

Įsivaizduokime, kad mums reikia atlikti tam tikrą "sunkų", resursų reikalaujantį veiksmą. Nelabai optimalu tai daryti kiekvieną kartą įvedant simbolį - geriau palaukti galutinio duomenų įvedimo ir tada vieną kartą atlikti reikiamą operaciją ir rezultatą išvesti į pastraipą.

Norėdami tai padaryti, mums reikia įvesti mygtuką, kurį paspaudus bus atliekama mūsų resursų reikalaujanti operacija. Tokiu atveju kiekvienas įvesties laukas vėl turės savo būseną (state), plius mums reikia dar vienos būsenos, kad įrašytume operacijos rezultatą ir atvaizduotume jį ekrane.

Pažiūrėkime pavyzdžiu. Tarkime, kad turime du įvesties laukus ir mygtuką. Paspaudus mygtuką, suraskime įvestų į laukus skaičių sumą.

Įgyvendinkime:

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

Galima naudoti sutrumpintą variantą:

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

Duoti du įvesties laukai, du mygtukai ir pastraipa. Tegul į įvesties laukus įvedami skaičiai. Paspaudus pirmąjį mygtuką, suraskite skaičių sumą, o paspaudus antrąjį mygtuką - sandaugą. Rezultatą išveskite į pastraipą.

Duoti du įvesties laukai, mygtukas ir pastraipa. Tegul į įvesties laukus įvedamos datos formatu 2025-12-31. Paspaudus mygtuką, suraskite skirtumą tarp datų dienomis ir rezultatą išveskite į pastraipą.

Modifikuokite ankstesnį uždavinį taip, kad pagal nutylėjimą įvesties laukuose būtų dabartinė data.

Duotas įvesties laukas ir pastraipa. Į įvesties lauką įvedamas skaičius. Praradus fokusą, išveskite į pastraipą įvesto skaičiaus skaitmenų sumą.

Duotas įvesties laukas ir pastraipa. Į įvesties lauką įvedamas skaičius. Praradus fokusą, išveskite į pastraipą įvesto skaičiaus daliklių sandaugą.