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:
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>;
}
Se poate folosi varianta prescurtată:
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>;
}
Sunt date două input-uri, două butoane și un paragraf. Să presupunem că în input-uri se introduc numere. La click pe primul buton găsiți suma numerelor, iar la click pe al doilea buton - produsul. Rezultatul afișați-l în paragraf.
Sunt date două input-uri, un buton și un paragraf. Să presupunem că în input-uri se introduc date în formatul 2025-12-31. La click pe buton găsiți diferența dintre date în zile și rezultatul afișați-l în paragraf.
Modificați problema anterioară astfel încât implicit în input-uri să fie dată curentă.
Este dat un input și un paragraf. În input se introduce un număr. La pierderea focus-ului afișați în paragraf suma cifrelor numărului introdus.
Este dat un input și un paragraf. În input se introduce un număr. La pierderea focus-ului afișați în paragraf produsul divizorilor numărului introdus.
