Formas datu apstrāde, nospiežot pogu React

Iepriekšējā nodarbībā mēs darījām tā, lai ievadot simbolu input laukā, rindkopā acumirklī parādītos rezultāts. Tas, protams, izskatās skaisti, bet tam ir trūkums.

Iedomāsimies, ka mums ir jāveic kāda "smaga", resursietilpīga operācija. Nav īsti optimāli to darīt katru reizi, ievadot simbolu - labāk pagaidīt galīgo datu ievadi un tad vienu reizi izpildīt vajadzīgo operāciju un rezultātu parādīt rindkopā.

Lai to izdarītu, mums jāievieš poga, kuras nospiešanas reizē tiks veikta mūsu resursietilpīgā operācija. Šajā gadījumā mums atkal katram inputam atbilsts savs state, plus vēl viens state mums ir vajadzīgs, lai ierakstītu operācijas rezultātu un attēlotu to ekrānā.

Apskatīsim piemērā. Pieņemsim, ka mums ir divi input lauki un poga. Nospiežot pogu, atradīsim input laukos ievadīto skaitļu summu.

Implementēsim:

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

Var izmantot saīsināto variantu:

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