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:

jsxfunction 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:

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