Hantera formulärdata genom att klicka på en knapp i React
I föregående lektion gjorde vi så att när en symbol skrevs in i inputfältet dök resultatet upp omedelbart i stycket. Det ser naturligtvis vackert ut, men har en nackdel.
Föreställ dig att vi behöver göra en ganska "tung", resurskrävande operation. Det är inte optimalt att göra den för varje inmatad symbol - det är bättre att vänta på att datainmatningen är klar och sedan utföra den nödvändiga operationen en gång och visa resultatet i ett stycke.
För att göra detta måste vi införa en knapp, vid klick på vilken vår resurskrävande operation kommer att utföras. I det här fallet kommer varje inputfält återigen att ha sitt eget tillstånd, plus att vi behöver ytterligare ett tillstånd för att spara resultatet av operationen och visa det på skärmen.
Låt oss titta på ett exempel. Låt oss säga att vi har två inputfält och en knapp. När du klickar på knappen, låt oss hitta summan av talen som anges i inputfälten.
Låt oss implementera:
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>;
}
Du kan använda en förkortad 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>result: {result}</p>
</div>;
}
Det finns två inputfält, två knappar och ett stycke. Låt tal matas in i inputfälten. När du klickar på den första knappen, hitta summan av talen, och när du klickar på den andra knappen - produkten. Skriv ut resultatet i stycket.
Det finns två inputfält, en knapp och ett stycke. Låt datum matas in i inputfälten i formatet 2025-12-31. När du klickar på knappen, hitta skillnaden mellan datumen i dagar och skriv ut resultatet i stycket.
Modifiera den föregående uppgiften så att inputfälten som standard har dagens datum.
Det finns ett inputfält och ett stycke. Ett nummer matas in i inputfältet. När fokus försvinner, skriv ut summan av siffrorna i det angivna numret i stycket.
Det finns ett inputfält och ett stycke. Ett nummer matas in i inputfältet. När fokus försvinner, skriv ut produkten av divisorer för det angivna numret i stycket.
