Uchakataji wa Data ya Fomu kwa Kubofya Kitufe kwenye React
Katika somo lililopita tulifanya ivyo, ili wakati wa kuingiza herufi kwenye kishingio kwenye aya matokeo yaonekane mara moja. Hii, bila shaka, inaonekana ni nzuri, lakini ina upungufu.
Tuwazie mwenyewe, kwamba tunahitaji kufanya operesheni "nzito", inayotumia rasilimali nyingi. Haifai kabisa kuifanya kwa kila herufi inayoingizwa - ni bora kungoja kuingiza data kamili kisha kufanya operesheni inayohitajika mara moja na kutoa matokeo kwenye aya.
Kwa hili tunahitaji kuanzisha kitufe, ambacho kwa kubofya juu yake operesheni yetu yenye kutumia rasilimali nyingi itafanyika. Katika kesi hii, kila kishingio kitaenda kuwa na hali yake (state), jumlisha hali nyingine tunayohitaji kwa kurekodi matokeo ya operesheni na kuonyesha kwenye skrini.
Tuangalie kwa mfano. Hebu tuseme tuna viingizo viwili na kitufe kimoja. Kwa kubofya kitufe hebu tupate jumla ya nambari zilizoingizwa kwenye viingizo.
Tutekeleze:
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>;
}
Inaweza kutumika toleo lililofupishwa:
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>;
}
Zipo viingizo viwili, vitofali viwili na aya. Hebu kwenye viingizo viingizwe nambari. Kwa kubofya kitufe cha kwanza tafuta jumla ya nambari, na kwa kubofya kitufe cha pili - zidisha. Matokeo yatolewe kwenye aya.
Zipo viingizo viwili, kitufe kimoja na aya. Hebu kwenye viingizo viingizwe tarehe kwa umbizo 2025-12-31. Kwa kubofya kitufe tafuta tofauti kati ya tarehe kwa siku na matokeo yatolewe kwenye aya.
Rekebisha shida iliyotangulia, ili kwa chaguo-msingi kwenye viingizo iwe kwa tarehe ya sasa.
Kuna kishingio kimoja na aya. Kwenye kishingio ingizwa nambari. Kwa kupoteza umakini (blur) toa kwenye aya jumla ya tarakimu za nambari iliyoingizwa.
Kuna kishingio kimoja na aya. Kwenye kishingio ingizwa nambari. Kwa kupoteza umakini (blur) toa kwenye aya zao la vigawanyiko (vidonge) vya nambari iliyoingizwa.
