Formas datu apstrāde, nospiežot pogu React

Iepriekšējā nodarbībā mēs darījām tā, lai ievadot simbolu input laukā, rindkopā acumirklī parādītos rezultāts. Tas, protams, izskatās skaisti, bet tam ir trūkums.

Iedomāsimies, ka mums ir jāveic kāda "smaga", resursietilpīga operācija. Nav īsti optimāli to darīt katru reizi, ievadot simbolu - labāk pagaidīt galīgo datu ievadi un tad vienu reizi izpildīt vajadzīgo operāciju un rezultātu parādīt rindkopā.

Lai to izdarītu, mums jāievieš poga, kuras nospiešanas reizē tiks veikta mūsu resursietilpīgā operācija. Šajā gadījumā mums atkal katram inputam atbilsts savs state, plus vēl viens state mums ir vajadzīgs, lai ierakstītu operācijas rezultātu un attēlotu to ekrānā.

Apskatīsim piemērā. Pieņemsim, ka mums ir divi input lauki un poga. Nospiežot pogu, atradīsim input laukos ievadīto skaitļu summu.

Implementēsim:

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

Var izmantot saīsināto variantu:

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

Doti divi input lauki, divas pogas un rindkopa. Lai input laukos tiek ievadīti skaitļi. Nospiežot pirmo pogu, atrodiet skaitļu summu, bet nospiežot uz otro pogu - reizinājumu. Rezultātu izvadiet rindkopā.

Doti divi input lauki, poga un rindkopa. Lai input laukos tiek ievadīti datumi formātā 2025-12-31. Nospiežot pogu, atrodiet atšķirību starp datumiem dienās un rezultātu izvadiet rindkopā.

Modificējiet iepriekšējo uzdevumu tā, lai pēc noklusējuma input laukos atrastos pašreizējais datums.

Dots input lauks un rindkopa. Input laukā tiek ievadīts skaitlis. Pēc fokusa zaudēšanas izvadiet rindkopā ievadītā skaitļa ciparu summu.

Dots input lauks un rindkopa. Input laukā tiek ievadīts skaitlis. Pēc fokusa zaudēšanas izvadiet rindkopā ievadītā skaitļa dalītāju reizinājumu.