බොත්තමක් ක්ලික් කිරීමෙන් පෝරම දත්ත සකසන ආකාරය React හි
පෙර පාඩමේදී, ආදාන ක්ෂේත්රයකට අකුරු ඇතුළත් කරන සෑම අවස්ථාවකම ඡේදයක ප්රතිඵලය ක්ෂණිකව පෙනෙන ආකාරයට අපි සකස් කළෙමු. එය ඇත්තෙන්ම අලංකාර පෙනුමක් ඇති කරයි, නමුත් එහි අඩුපාඩුවක් පවතී.
අපට යම් "බරින් බරවූ", සම්පත් අවශ්ය කරන මෙහෙයුමක් සිදු කිරීමට අවශ්ය බව සිතන්න. සෑම අකුරු ඇතුළත් කිරීමකදීම එය සිදු කිරීම ඉතා ප්රශස්ත නොවේ - අවසන් දත්ත ඇතුළත් කිරීම අවසන් වන තුරු බලා සිටීම සහ පසුව අවශ්ය මෙහෙයුම එක් වරක් සිදු කර ඡේදයක ප්රතිඵලය පෙන්වීම වඩා හොඳය.
මේ සඳහා, අපි බොත්තමක් හඳුන්වා දිය යුතු අතර, එය ක්ලික් කිරීමෙන් අපගේ සම්පත් අවශ්ය කරන මෙහෙයුම සිදු කරනු ඇත. මෙම අවස්ථාවේදී, එක් එක් ආදාන ක්ෂේත්රය සඳහා එහිම state එකක් පවතින අතර, මෙහෙයුමේ ප්රතිඵලය සටහන් කිරීම සහ තිරය මත පෙන්වීම සඳහා තවත් state එකක් අපට අවශ්ය වේ.
උදාහරණයක් බලමු. අපට ආදාන ක්ෂේත්ර දෙකක් සහ බොත්තමක් ඇති බවට සිතමු. බොත්තම ක්ලික් කිරීමෙන්, ආදාන ක්ෂේත්රවලට ඇතුළත් කරන ලද සංඛ්යාවල එකතුව සොයා ගනිමු.
අපි ක්රියාත්මක කරමු:
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>;
}
කෙටි ආකාරය භාවිතා කළ හැකිය:
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>;
}
ආදාන ක්ෂේත්ර දෙකක්, බොත්තම් දෙකක් සහ ඡේදයක් ලබා දී ඇත. ආදාන ක්ෂේත්රවලට සංඛ්යා ඇතුළත් කරමු. පළමු බොත්තම ක්ලික් කිරීමෙන් සංඛ්යාවල එකතුව සොයා ගන්න, සහ දෙවන බොත්තම ක්ලික් කිරීමෙන් - ගුණිතය සොයා ගන්න. ප්රතිඵලය ඡේදයේ පෙන්වන්න.
ආදාන ක්ෂේත්ර දෙකක්, බොත්තමක් සහ ඡේදයක් ලබා දී ඇත. ආදාන ක්ෂේත්රවලට 2025-12-31 ආකෘතියෙන් දිනයන් ඇතුළත් කරමු. බොත්තම ක්ලික් කිරීමෙන් දිනයන් අතර වෙනස දින වශයෙන් සොයා ගෙන ප්රතිඵලය ඡේදයේ පෙන්වන්න.
පෙර කාර්යය වෙනස් කරන්න, ආදාන ක්ෂේත්රවලට අක්රිය දිනය පෙරනිමිය ලෙස සිටීමට.
ආදාන ක්ෂේත්රයක් සහ ඡේදයක් ලබා දී ඇත. ආදාන ක්ෂේත්රයට සංඛ්යාවක් ඇතුළත් කරනු ලැබේ. අවධානය අහිමි වීමෙන් පසු, ඇතුළත් කළ සංඛ්යාවේ ඉලක්කම්වල එකතුව ඡේදයේ පෙන්වන්න.
ආදාන ක්ෂේත්රයක් සහ ඡේදයක් ලබා දී ඇත. ආදාන ක්ෂේත්රයට සංඛ්යාවක් ඇතුළත් කරනු ලැබේ. අවධානය අහිමි වීමෙන් පසු, ඇතුළත් කළ සංඛ්යාවේ බෙදුම්කරුවන්ගේ ගුණිතය ඡේදයේ පෙන්වන්න.
