Prelucrarea datelor formularului la click pe buton în React

În lecția precedentă am făcut astfel încât la introducerea unui caracter în input, în paragraf să apară instantaneu rezultatul. Acest lucru, desigur, arată frumos, dar are un dezavantaj.

Să ne imaginăm că trebuie să facem o operație "greă", care consumă multe resurse. Nu este foarte optim să o facem la fiecare introducere de caracter - este mai bine să așteptăm finalizarea introducerii datelor și apoi să executăm operația necesară o singură dată și să afișăm rezultatul în paragraf.

Pentru aceasta, trebuie să introducem un buton, la click-ul pe care se va efectua operația noastră care consumă multe resurse. În acest caz, din nou, fiecărui input îi va corespunde propria sa stare (state), plus încă o stare este necesară pentru înregistrarea rezultatului operației și afișarea lui pe ecran.

Să privim un exemplu. Să presupunem că avem două input-uri și un buton. La click pe buton, să găsim suma numerelor introduse în input-uri.

Să implementăm:

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

Se poate folosi varianta prescurtată:

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