බොත්තමක් ක්ලික් කිරීමෙන් පෝරම දත්ත සකසන ආකාරය React හි

පෙර පාඩමේදී, ආදාන ක්ෂේත්‍රයකට අකුරු ඇතුළත් කරන සෑම අවස්ථාවකම ඡේදයක ප්‍රතිඵලය ක්ෂණිකව පෙනෙන ආකාරයට අපි සකස් කළෙමු. එය ඇත්තෙන්ම අලංකාර පෙනුමක් ඇති කරයි, නමුත් එහි අඩුපාඩුවක් පවතී.

අපට යම් "බරින් බරවූ", සම්පත් අවශ්‍ය කරන මෙහෙයුමක් සිදු කිරීමට අවශ්‍ය බව සිතන්න. සෑම අකුරු ඇතුළත් කිරීමකදීම එය සිදු කිරීම ඉතා ප්‍රශස්ත නොවේ - අවසන් දත්ත ඇතුළත් කිරීම අවසන් වන තුරු බලා සිටීම සහ පසුව අවශ්‍ය මෙහෙයුම එක් වරක් සිදු කර ඡේදයක ප්‍රතිඵලය පෙන්වීම වඩා හොඳය.

මේ සඳහා, අපි බොත්තමක් හඳුන්වා දිය යුතු අතර, එය ක්ලික් කිරීමෙන් අපගේ සම්පත් අවශ්‍ය කරන මෙහෙයුම සිදු කරනු ඇත. මෙම අවස්ථාවේදී, එක් එක් ආදාන ක්ෂේත්‍රය සඳහා එහිම state එකක් පවතින අතර, මෙහෙයුමේ ප්‍රතිඵලය සටහන් කිරීම සහ තිරය මත පෙන්වීම සඳහා තවත් state එකක් අපට අවශ්‍ය වේ.

උදාහරණයක් බලමු. අපට ආදාන ක්ෂේත්‍ර දෙකක් සහ බොත්තමක් ඇති බවට සිතමු. බොත්තම ක්ලික් කිරීමෙන්, ආදාන ක්ෂේත්‍රවලට ඇතුළත් කරන ලද සංඛ්‍යාවල එකතුව සොයා ගනිමු.

අපි ක්‍රියාත්මක කරමු:

jsxfunction 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>;
}

කෙටි ආකාරය භාවිතා කළ හැකිය:

jsxfunction 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>;
}