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

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

Gysgaldylan wariantdan peýdalanyp bolýar:

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