Behandling af formulardata ved klik på en knap i React
I den forrige lektion gjorde vi det sådan, at når et symbol blev indtastet i inputfeltet, ville resultatet øjeblikkeligt vises i afsnittet. Det ser selvfølgelig smukt ud, men har en ulempe.
Lad os forestille os, at vi skal udføre en "tung", ressourcekrævende operation. Det er ikke særlig optimalt at gøre det ved hver indtastning af et symbol - det er bedre at vente på, at dataene er indtastet færdigt, og derefter udføre den nødvendige operation én gang og vise resultatet i et afsnit.
For at gøre dette skal vi tilføje en knap, hvor et klik på den vil udføre vores ressourcekrævende operation. I dette tilfælde vil hvert inputfelt igen have sin egen state, plus vi har brug for en ekstra state til at gemme resultatet af operationen og vise det på skærmen.
Lad os se på et eksempel. Antag, at vi har to inputfelter og en knap. Ved at klikke på knappen lad os finde summen af de tal, der er indtastet i inputfelterne.
Lad os implementere det:
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>;
}
Man kan bruge en forkortet version:
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>;
}
Der er givet to inputfelter, to knapper og et afsnit. Lad der blive indtastet tal i inputfelterne. Ved at klikke på den første knap, find summen af tallene, og ved at klikke på den anden knap - produktet. Resultatet skal udskrives i afsnittet.
Der er givet to inputfelter, en knap og et afsnit. Lad der i inputfelterne blive indtastet datoer i formatet 2025-12-31. Ved at klikke på knappen, find forskellen mellem datoerne i dage og udskriv resultatet i afsnittet.
Modificer den forrige opgave, så der som standard står den aktuelle dato i inputfelterne.
Der er givet et inputfelt og et afsnit. I inputfeltet indtastes et tal. Ved tab af fokus, udskriv i afsnittet summen af cifrene i det indtastede tal.
Der er givet et inputfelt og et afsnit. I inputfeltet indtastes et tal. Ved tab af fokus, udskriv i afsnittet produktet af divisorerne i det indtastede tal.
