Behandling av skjemadata ved å trykke på en knapp i React
I forrige leksjon gjorde vi det slik at når et symbol ble skrevet inn i et input-felt, dukket resultatet umiddelbart opp i et avsnitt. Dette ser selvfølgelig pent ut, men har en ulempe.
La oss forestille oss at vi må utføre en "tung", ressurskrevende operasjon. Det er ikke veldig optimalt å gjøre den for hvert inntastet symbol - det er bedre å vente på at datainntastingen er ferdig og deretter utføre den nødvendige operasjonen én gang og vise resultatet i et avsnitt.
For å gjøre dette må vi introdusere en knapp, ved å trykke på denne vil vår ressurskrevende operasjon bli utført. I dette tilfellet vil hvert input-felt igjen ha sin egen state, pluss at vi trenger en state til for å lagre resultatet av operasjonen og vise det på skjermen.
La oss se på et eksempel. Anta at vi har to input-felter og en knapp. La oss, ved å trykke på knappen, finne summen av tallene som er skrevet inn i input-feltene.
La oss implementere:
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>resultat: {result}</p>
</div>;
}
Man kan bruke en forkortet variant:
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>resultat: {result}</p>
</div>;
}
Det er gitt to input-felter, to knapper og et avsnitt. La det skrives inn tall i input-feltene. Ved å trykke på den første knappen, finn summen av tallene, og ved å trykke på den andre knappen - produktet. Resultatet skrives ut i avsnittet.
Det er gitt to input-felter, en knapp og et avsnitt. La det skrives inn datoer i input-feltene i formatet 2025-12-31. Ved å trykke på knappen, finn forskjellen mellom datoene i dager og skriv ut resultatet i avsnittet.
Modifiser den forrige oppgaven slik at det som standard står nåværende dato i input-feltene.
Det er gitt et input-felt og et avsnitt. Det skrives inn et tall i input-feltet. Ved tap av fokus, skriv ut i avsnittet summen av sifrene i det innskrevne tallet.
Det er gitt et input-felt og et avsnitt. Det skrives inn et tall i input-feltet. Ved tap av fokus, skriv ut i avsnittet produktet av divisorene til det innskrevne tallet.
