Përpunimi i të dhënave të formës duke klikuar në buton në React
Në mësimin e mëparshëm ne bëmë në mënyrë që kur futet një karakter në input, në paragraf të shfaqej menjëherë rezultati. Kjo, sigurisht, duket e bukur, por ka një disavantazh.
Le të imagjinojmë se duhet të kryejmë një operacion "të rëndë", që kërkon burime. Nuk është shumë optimale ta bësh atë për çdo futje karakteri - është më mirë të presësh deri në fund të futjes së të dhënave dhe më pas të kryhet operacioni i nevojshëm një herë dhe rezultati të shfaqet në paragraf.
Për këtë, na duhet të fusim një buton, upon click of which do të kryhet operacioni ynë që kërkon shumë burime. Në këtë rast, përsëri çdo input do të ketë state-in e vet, plus na duhet një state tjetër për të regjistruar rezultatin e operacionit dhe për ta shfaqur atë në ekran.
Le të shohim një shembull. Le të themi se kemi dy inpute dhe një buton. Duke klikuar në buton, le të gjejmë shumën e numrave të futur në inpute.
Le të implementojmë:
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>;
}
Mund të përdoret edhe versioni i shkurtuar:
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>;
}
Janë dhënë dy inpute, dy butona dhe një paragraf. Le të futen numra në inpute. Duke klikuar në butonin e parë gjeni shumën e numrave, dhe duke klikuar në butonin e dytë - produktin. Rezultatin shfaqeni në paragraf.
Janë dhënë dy inpute, një buton dhe një paragraf. Le të futen data në inpute në formatin 2025-12-31. Duke klikuar në buton gjeni ndryshimin midis datave në ditë dhe rezultatin shfaqeni në paragraf.
Modifikoni detyrën e mëparshme në mënyrë që si parazgjedhje në inputet të qëndrojë data aktuale.
Jepet një input dhe një paragraf. Në input futet një numër. Pas humbjes së fokusit shfaqni në paragraf shumën e shifrave të numrit të futur.
Jepet një input dhe një paragraf. Në input futet një numër. Pas humbjes së fokusit shfaqni në paragraf produktin e pjesëtuesve të numrit të futur.
