React-এ ইনপুট নিয়ে কাজ

React-এ ইনপুট নিয়ে কাজ করা হয় স্টেট ব্যবহার করে। প্রতিটি ইনপুটকে তার নিজস্ব স্টেট নির্ধারণ করা হয়, যাতে ইনপুটের value থাকে।

আসুন একটি উদাহরণ দেখি। ধরা যাক আমাদের একটি ইনপুট আছে:

function App() {
	return <div>
		<input />
	</div>;
}

ধরা যাক আমাদের একটি স্টেটও আছে:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input />
	</div>;
}

আসুন ইনপুটের value অ্যাট্রিবিউটে আমাদের স্টেট বাঁধাই:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} />
	</div>;
}

এক্ষেত্রে এটি হবে যে স্টেট পরিবর্তন হলে, ইনপুটের টেক্সটও reactively পরিবর্তিত হবে।

যাইহোক, এটি একটি আকর্ষণীয় পার্শ্বপ্রতিক্রিয়া দেয়: এখন ব্রাউজারে কোড চালালে ইনপুটে টেক্সট পরিবর্তন করা অসম্ভব! কারণ: কারণ ইনপুটে টেক্সট লিখলে value স্টেট পরিবর্তিত হয় না, তদনুসারে, ইনপুটের টেক্সটও পরিবর্তিত হওয়া উচিত নয়।

নিজেই চেষ্টা করুন। আমার কোড কপি করে নিজের কাছে চালান। ইনপুটে টেক্সট পরিবর্তন করার চেষ্টা করুন - আপনার কিছুই হবে না। ব্রাউজার কনসোল খুলুন - আপনি এতে React-এর একটি সতর্কতা দেখতে পাবেন। এই সতর্কতা আমাদের নির্দেশ করে যে আমরা ইনপুটে স্টেট বেঁধেছি, কিন্তু তাতে করে ইনপুটটি লক হয়ে গেছে।

আসুন এমন করি যাতে আমাদের ইনপুটে টেক্সট লিখা যায়। এর জন্য এটি করতে হবে যে টাইপ করার সময় আমাদের স্টেট পরিবর্তিত হয় ইনপুটের বর্তমান মান অনুযায়ী।

এর জন্য শুরুতে ইনপুটে onChange ইভেন্ট লাগাতে হবে:

function App() {
	const [value, setValue] = useState('text');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

এই ইভেন্টটি React-এ vanilla JS-এর তুলনায় ভিন্নভাবে আচরণ করে। React-এ এটি ইনপুট পরিবর্তিত হওয়ার সাথে সাথেই ট্রিগার হয়। অর্থাৎ একটি অক্ষর লিখলে বা মুছলে।

আসুন এখন আমাদের ইভেন্টের হ্যান্ডলার যোগ করি:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

এই হ্যান্ডলারে আমাদের ইনপুটের বর্তমান টেক্সট পড়ে ফাংশন setValue ব্যবহার করে স্টেটে সেট করতে হবে।

সমস্যা হলো যে এই ফাংশনের this আমাদের ইনপুটকে নির্দেশ করবে না - এটি React-এর একটি বৈশিষ্ট্য। এলিমেন্ট পেতে, যেখানে ইভেন্টটি ঘটেছে, আমাদের event.target ব্যবহার করতে হবে:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // ইনপুট DOM এলিমেন্টের রেফারেন্স
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

event.target ব্যবহার করে ইনপুটের বর্তমান টেক্সট আউটপুট করি:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // ইনপুটের বর্তমান টেক্সট
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

এবং এখন ইনপুটের টেক্সট আমাদের স্টেটে লিখি:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

এখন আমরা ইনপুটে টেক্সট লিখতে সক্ষম হব। এ সময় স্টেট value সর্বদা ইনপুটের বর্তমান টেক্সট ধারণ করবে।

আমরা এতে সহজেই নিশ্চিত হতে পারি। আমাদের টেক্সটের বিষয়বস্তু একটি প্যারাগ্রাফে আউটপুট করি। এই ক্ষেত্রে ইনপুটে টেক্সট লিখলে টাইপ করা টেক্সট স্বয়ংক্রিয়ভাবে প্যারাগ্রাফে প্রদর্শিত হবে:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>text: {value}</p>
	</div>;
}

আমরা একটি অ্যানোনিমাস অ্যারো ফাংশন সহ আরও কমপ্যাক্ট সংস্করণে লিখতে পারি:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>text: {value}</p>
	</div>;
}

সুতরাং, যেকোনো ইনপুট কাজ করার জন্য আমাদের নিম্নলিখিতগুলি প্রয়োজন: এই ইনপুটের জন্য একটি স্টেট তৈরি করুন, ইনপুটের value অ্যাট্রিবিউটে স্টেট বাঁধুন, ইনপুটে onChange ইভেন্ট লাগান, ইভেন্ট হ্যান্ডলারে ইনপুটের স্টেট পরিবর্তন করুন এর টেক্সটে।

এই অপারেশনগুলি প্রতিটি ইনপুট দিয়ে করতে হবে। অর্থাৎ, আপনার যদি দুটি ইনপুট থাকে, তাহলে আপনার দুটি স্টেট এবং দুটি onChange ইভেন্ট হ্যান্ডলার ফাংশন থাকবে।

দুটি ইনপুট তৈরি করুন। প্রথম ইনপুটের টেক্সট যেন প্রথম প্যারাগ্রাফে আউটপুট হয়, এবং দ্বিতীয় ইনপুটের টেক্সট - দ্বিতীয় প্যারাগ্রাফে।