Düwme basylanda React-da formanyň maglumatlaryny işlemek

Öňki sapakda inputa simwol girizilende abzadda derrew netijeniň görkezilmegini ýerine ýetirýärdik. Bu, elbetde, owadan görünýär, ýöne ýetmezçiligem bar.

Özümize "agyr", resurs talap edýän bir operasiýany ýerine ýetirmeli diýip göz öňüne getireýälim. Her simwol girizilende ony ýerine ýetirmek optimallaşdyrylmadyk - gowyrak, maglumat girizmegiň soňuna çenli garaşmaly we soňra zerur amaly bir gezek ýerine ýetirip, netijäni abzada görkezmeli.

Bunun üçin bir düwme girizmeli, basylanda biziň agyr operasiýamyz ýerine ýetiriler. Bu ýagdaýda ýene her bir inputa öz stiteňiz deň bolar, goşmaça bir site bolsa operasiýanyň netijesini ýazmak we ekranda görkezmek üçin gerek bolar.

Mysal üsti bilen seredeliň. Iki sany inputyňyz we bir düwmäňiz bardygy bolsun. Düwmä basylanda inputlara girizilen sanlaryň jemini tapaýalyň.

Amala aşyralyň:

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

Gysgaldylan wariantdan peýdalanyp bolýar:

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 sany input, iki sany düwme we bir abzat berlipdir. Inputlara sanlar girizilsin. Birinji düwmä basylanda sanlaryň jemini tapaý, ikinji düwmä basylanda bolsa hasylyny tapaý. Netijäni abzada görkeziň.

Iki sany input, bir düwme we bir abzat berlipdir. Inputlara 2025-12-31 formatynda seneler girizilsin. Düwmä basylanda seneleriň arasyndaky tapawudy günlerde tapyň we netijäni abzada görkeziň.

Öňki meseläni inputlara bellenen hali hazirki senä deň boljak ýaly üýtgediň.

Bir input we bir abzat berlipdir. Inputa san girizilýär. Fokus ýitirilende girizilen sanyň sanlarynyň jemini abzada görkeziň.

Bir input we bir abzat berlipdir. Inputa san girizilýär. Fokus ýitirilende girizilen sanyň bölüjileriniň hasylyny abzada görkeziň.