Butona tıklayarak React'ta form verilerini işleme

Önceki derste, bir inputa karakter girildiğinde paragrafta anında sonucun görünmesini sağlıyorduk. Bu elbette güzel görünüyor ancak bir dezavantajı var.

Biraz "ağır", kaynak yoğun bir işlem yapmamız gerektiğini düşünelim. Her karakter girişinde bunu yapmak çok optimal değil - nihai veri girişinin bitmesini bekleyip sonra gerekli işlemi bir kez yapmak ve sonucu paragrafta göstermek daha iyidir.

Bunun için, tıklandığında kaynak yoğun işlemimizin yapılacağı bir buton eklememiz gerekiyor. Bu durumda yine her inputun kendi state'i olacak, artı bir state'e daha işlem sonucunu kaydetmek ve ekranda göstermek için ihtiyacımız olacak.

Bir örnek üzerinden görelim. İki inputumuz ve bir butonumuz olsun. Butona tıklandığında, inputlara girilen sayıların toplamını bulalım.

Haydi gerçekleştirelim:

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

Kısa versiyonu da kullanılabilir:

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

İki input, iki buton ve bir paragraf verilmiştir. Inputlara sayılar girilsin. İlk butona tıklandığında sayıların toplamını, ikinci butona tıklandığında ise - çarpımını bulun. Sonucu paragrafa yazdırın.

İki input, bir buton ve bir paragraf verilmiştir. Inputlara 2025-12-31 formatında tarihler girilsin. Butona tıklandığında tarihler arasındaki farkı gün cinsinden bulun ve sonucu paragrafa yazdırın.

Önceki görevi, inputlarda varsayılan olarak mevcut tarihin bulunacak şekilde değiştirin.

Bir input ve bir paragraf verilmiştir. Inputa bir sayı girilir. Odak kaybedildiğinde, girilen sayının rakamları toplamını paragrafa yazdırın.

Bir input ve bir paragraf verilmiştir. Inputa bir sayı girilir. Odak kaybedildiğinde, girilen sayının bölenlerinin çarpımını paragrafa yazdırın.