React හි ආදාන ක්ෂේත්‍ර අරාවකට බැඳීම

notes යන තත්වයේ අරාවක් ගබඩා කර ඇතැයි සිතමු:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  return <div>
    
  </div>;
}

අපට අරාවේ මූලද්‍රව්‍යවල එකතුව සොයා ගන්නා සහායක ශ්‍රිතයක් ද ඇතැයි සිතමු:

jsxfunction getSum(arr) {
  let sum = 0;
  
  for (const elem of arr) {
    sum += +elem;
  }
  
  return sum;
}

function App() {
  ...
}

අපගේ සහායක ශ්‍රිතය භාවිතා කරමින්, අපගේ තත්වයෙන් අරාවේ මූලද්‍රව්‍යවල එකතුව සොයා ප්‍රදර්ශනය කරමු:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  return <div>
    {getSum(notes)}
  </div>;
}

දැන් අපි ආදාන ක්ෂේත්‍ර තුනක් සාදා, එක් එක් ආදාන ක්ෂේත්‍රයේ value වල අරාවේ එක් එක් මූලද්‍රව්‍යය ලියමු:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  return <div>
    <input value={notes[0]} />
    <input value={notes[1]} />
    <input value={notes[2]} />
    
    {getSum(notes)}
  </div>;
}

දැන් අපි අපගේ ආදාන ක්ෂේත්‍රවලට onChange සිදුවීම එකතු කරමු. මේ සමඟ අපි මෙම සිදුවීම සඳහා එක් පොදු හසුරුවන ශ්‍රිතයක් සාදමු:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    // පොදු හසුරුවන ශ්‍රිතය
  }
  
  return <div>
    <input value={notes[0]} onChange={event => changeHandler(0, event)} />
    <input value={notes[1]} onChange={event => changeHandler(1, event)} />
    <input value={notes[2]} onChange={event => changeHandler(2, event)} />
    
    {getSum(notes)}
  </div>;
}

ඔබට පෙනෙන පරිදි, changeHandler ශ්‍රිතය පළමු පරාමිතියක් ලෙස අරාවේ එම මූලද්‍රව්‍යයේ අංකය පිළිගනී, එය මෙම ආදාන ක්ෂේත්‍රය සංස්කරණය කරයි.

මෙම අංකය අනුව, අපට ආදාන ක්ෂේත්‍රයේ අන්තර්ගතය සමඟ අරාවේ මූලද්‍රව්‍යය ප්‍රතිස්ථාපනය කළ හැකිය.

අපි එය කරමු:

jsxfunction changeHandler(index, event) {
  setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

දැන් ඕනෑම ආදාන ක්ෂේත්‍රයක් සංස්කරණය කළ හැකිය, එම අතරතුර අරාව ප්‍රතික්‍රියාශීලීව වෙනස් වන අතර, ඒ අනුව, එහි මූලද්‍රව්‍යවල එකතුව නැවත ගණනය කෙරේ.

අපි අපගේ සියලුම කේතය එකට එකතු කරමු:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
  }
  
  return <div>
    <input value={notes[0]} onChange={event => changeHandler(0, event)} />
    <input value={notes[1]} onChange={event => changeHandler(1, event)} />
    <input value={notes[2]} onChange={event => changeHandler(2, event)} />
    
    {getSum(notes)}
  </div>;
}

ආදාන ක්ෂේත්‍ර චක්‍රයක් තුළ සෑදිය හැකි ආකාරය:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
  }
  
  const result = notes.map((note, index) => {
    return <input
      key={index}
      value={note}
      onChange={event => changeHandler(index, event)}
    />;
  });
  
  return <div>
    {result}
    {getSum(notes)}
  </div>;
}

jsx[1, 2, 3, 4, 5, 6, 7, 8, 9]