React-এ অ্যারেতে ইনপুট বাইন্ডিং

ধরি স্টেটে notes অ্যারে সংরক্ষিত আছে:

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

ধরি আমাদের একটি হেল্পার ফাংশনও আছে, যা অ্যারের উপাদানগুলোর যোগফল বের করে:

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

function App() {
	...
}

আসুন আমাদের স্টেটের অ্যারের উপাদানগুলোর যোগফল বের করি এবং দেখাই, এজন্য আমাদের হেল্পার ফাংশন ব্যবহার করে:

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

আসুন এখন তিনটি ইনপুট তৈরি করি এবং value-এ প্রতিটি ইনপুটে অ্যারের একটি উপাদান লিখি:

function 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 ইভেন্ট যোগ করি। এক্ষেত্রে আমরা একটি সাধারণ ইভেন্ট হ্যান্ডলার ফাংশন তৈরি করব:

function 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 ফাংশনটি প্রথম প্যারামিটার হিসেবে সেই অ্যারের উপাদানের নম্বর গ্রহণ করে, যা এই ইনপুটটি এডিট করছে।

এই নম্বর দ্বারা আমরা অ্যারের উপাদানটি ইনপুটের কন্টেন্ট দিয়ে প্রতিস্থাপন করতে পারি।

এটি করা যাক:

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

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

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

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

এটি করা যেতে পারে, যাতে ইনপুটগুলি লুপে গঠিত হয়:

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

নিম্নলিখিত অ্যারে দেওয়া আছে:

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

এই অ্যারের উপাদানগুলোর গড় মান স্ক্রিনে দেখান। লুপে উপাদান এডিট করার জন্য ইনপুট তৈরি করুন।