React में इनपुट को ऐरे से बांधना

मान लीजिए कि state में notes ऐरे stored है:

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

मान लीजिए कि हमारे पास एक सहायक function भी है, जो ऐरे के elements का sum निकालती है:

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

function App() {
  ...
}

आइए हमारे state ऐरे के elements का sum निकालें और दिखाएं, इसके लिए हमारी सहायक function का use करके:

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

आइए अब तीन inputs बनाएं और value हर एक input में ऐरे का एक element डालें:

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

आइए अब हमारे inputs पर onChange event add करें। इसके साथ ही एक common function-handler बनाएं इस event का:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3]);
  
  function changeHandler(index, event) {
    // common function-handler
  }
  
  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>;
}

जैसा कि आप देख रहे हैं, function changeHandler पहले parameter के रूप में उस array element का number लेती है, जिसे यह input edit कर रहा है।

इस number के द्वारा हम array के element को input की content से replace कर सकते हैं।

आइए इसे करें:

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

अब किसी भी input को edit किया जा सकता है, इससे reactively array change होगा और, इसी के अनुसार, इसके elements का sum recalculate होगा।

आइए हमारा सारा code एक साथ लाते हैं:

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

ऐसा किया जा सकता है कि inputs loop में form हों:

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]