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

ऐसे में यह परिणाम होगा कि स्टेट के बदलने पर, इनपुट का टेक्स्ट भी रिएक्टिवली बदल जाएगा।

हालांकि, यह एक दिलचस्प साइड इफेक्ट देता है: अब ब्राउज़र में कोड चलाने पर इनपुट में टेक्स्ट बदलना असंभव है! क्यों: क्योंकि इनपुट में टेक्स्ट डालने पर स्टेट value नहीं बदलता, तदनुसार, इनपुट का टेक्स्ट भी नहीं बदलना चाहिए।

खुद आजमाएं। मेरा कोड कॉपी करें और अपने पास चलाएं। इनपुट में टेक्स्ट बदलने की कोशिश करें - आप कुछ भी नहीं बदल पाएंगे। ब्राउज़र कंसोल खोलें - आप उसमें React की एक चेतावनी देखेंगे। यह चेतावनी हमें इशारा करती है कि हमने स्टेट को इनपुट से बांध दिया है, लेकिन ऐसा करके इनपुट को ब्लॉक कर दिया है।

आइए ऐसा बनाएं कि हमारे इनपुट में टेक्स्ट डाला जा सके। इसके लिए यह करना होगा कि टाइप करते समय हमारा स्टेट इनपुट के करंट वैल्यू पर बदल जाए।

इसके लिए सबसे पहले इनपुट पर onChange इवेंट लगाना होगा:

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

यह इवेंट React में शुद्ध 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 इवेंट हैंडलिंग फंक्शन होंगे।

दो इनपुट बनाएं। पहले इनपुट का टेक्स्ट पहले पैराग्राफ में आउटपुट हो, और दूसरे इनपुट का टेक्स्ट - दूसरे पैराग्राफ में।