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

এখন যেকোনো ইনপুট এডিট করা সম্ভব হবে, এতে করে অ্যারেটি reactively পরিবর্তিত হবে এবং সেই অনুযায়ী এর উপাদানগুলোর যোগফল পুনরায় গণনা করা হবে।

আসুন আমাদের সমস্ত কোড একত্রিত করি:

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]