Verwerking van vormdata deur op 'n knoppie in React te klik
In die vorige les het ons dit so gemaak dat wanneer 'n simbool in 'n invoerveld ingetik word, die resultaat onmiddellik in 'n paragraaf verskyn. Dit lyk natuurlik mooi, maar het 'n nadeel.
Stel jou voor dat ons 'n "swaar", hulpbron-intensiewe operasie moet uitvoer. Dit is nie baie optimaal om dit met elke toetsaanslag te doen nie - dit is beter om te wag vir die finale data-invoer en dan die nodige operasie een keer uit te voer en die resultaat in 'n paragraaf te wys.
Hiervoor moet ons 'n knoppie invoer, waarop geklik word om ons hulpbron-intensiewe operasie uit te voer. In sulke geval sal ons weer vir elke invoerveld sy eie state hê, plus nog een state benodig ons om die resultaat van die operasie op te slaan en op die skerm te wys.
Kom ons kyk na 'n voorbeeld. Gestel ons het twee invoervelde en 'n knoppie. Deur op die knoppie te klik, laat ons die som van die getalle wat in die invoervelde ingevoer is, vind.
Kom ons implementeer:
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>;
}
'n Verkorte weergawe kan gebruik word:
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>;
}
Twee invoervelde, twee knoppies en 'n paragraaf word gegee. Laat getalle in die invoervelde ingevoer word. Deur op die eerste knoppie te klik, vind die som van die getalle, en deur op die tweede knoppie te klik - die produk. Die resultaat moet in die paragraaf vertoon word.
Twee invoervelde, 'n knoppie en 'n paragraaf word gegee. Laat datums in die invoervelde ingevoer word in die formaat 2025-12-31. Deur op die knoppie te klik, vind die verskil tussen die datums in dae en wys die resultaat in die paragraaf.
Wysig die vorige taak sodat die huidige datum by verstek in die invoervelde staan.
'n Invoerveld en 'n paragraaf word gegee. 'n Getal word in die invoerveld ingevoer. Met verlies van fokus, wys die som van syfers van die ingevoerde getal in die paragraaf.
'n Invoerveld en 'n paragraaf word gegee. 'n Getal word in die invoerveld ingevoer. Met verlies van fokus, wys die produk van delers van die ingevoerde getal in die paragraaf.
