Forma melumatlarinin React-de duymeye klikle emeliyyatlar

Evvelki dersde biz edirdik ki, inputa simvol daxil edende abzasda ani olaraq netice peyda olsun. Bu, elbette ki, gozel gorunur, amma cetinlikleri de var.

Tesekkur edek ki, bizim "agir", resurs teleb eden emeliyyat yerine yetirmek lazimdir. Her simvol daxil edende onu yerine yetirmek cox optimal deyil - daha yaxsidir ki, final melumat daxil edilmesini gozleyek ve sonra lazimli emeliyyati bir defe yerine yetirib neticeni abzada gosterek.

Bunun ucun bizim duyme daxil etmeyimize ehtiyac var, ki, onun kliklenmesi ile bizim resurs teleb eden emeliyyat yerine yetirilsin. Bu halda, yeniden her inputa oz state-i uygun gelecek, ustelik bir state daha bizim ucun lazimdir ki, emeliyyatin neticesini yazib ekranda gostere bilek.

Nuemeye baxaq. Tutaq ki, bizim iki input ve bir duymemiz var. Duymeni klikleyende gelin inputlara daxil edilmish ededlerin ceminin tapaq.

Realizasiya edek:

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

Qisa variantdan da istifade etmek olar:

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

Iki input, iki duyme ve bir abzas verilib. Inputlara ededler daxil edilir. Birinci duymeye klikleyende ededlerin ceminin tapin, ikinci duymeye klikleyende ise hasili tapin. Neticeni abzada cap edin.

Iki input, bir duyme ve bir abzas verilib. Inputlara 2025-12-31 formatinda tarixler daxil edilir. Duymeye klikleyende tarixler arasindaki ferqi gunlerle tapin ve neticeni abzada cap edin.

Evvelki meseleni elce deyishin ki, inputlarda standart olaraq cari tarix olsun.

Bir input ve bir abzas verilib. Inputa eded daxil edilir. Fokus itirildikde daxil edilmish ededin reqemleri ceminin abzada cap edin.

Bir input ve bir abzas verilib. Inputa eded daxil edilir. Fokus itirildikde daxil edilmish ededin bolenlerinin hasilini abzada cap edin.