बटन दबाने पर React में फॉर्म डेटा प्रोसेसिंग

पिछले पाठ में हमने ऐसा किया था कि इनपुट में एक कैरेक्टर दर्ज करने पर पैराग्राफ में तुरंत परिणाम दिखाई दे। यह निस्संदेह अच्छा लगता है, लेकिन इसमें एक कमी है।

कल्पना कीजिए कि हमें एक "भारी", resource-intensive ऑपरेशन करना है। हर कैरेक्टर इनपुट पर इसे करना बहुत optimal नहीं है - डेटा इनपुट पूरा होने का इंतजार करना बेहतर है और फिर एक बार आवश्यक ऑपरेशन perform करना है और परिणाम को पैराग्राफ में दिखाना है।

इसके लिए हमें एक बटन introduce करने की आवश्यकता है, जिसके दबाने पर हमारा resource-intensive ऑपरेशन perform होगा। इस स्थिति में, फिर से प्रत्येक इनपुट का अपना state होगा, प्लस ऑपरेशन के परिणाम को रिकॉर्ड करने और उसे स्क्रीन पर दिखाने के लिए हमें एक और state की आवश्यकता है।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास दो इनपुट और एक बटन है। बटन दबाने पर आइए इनपुट में दर्ज किए गए नंबरों का योग find करें।

आइए implement करें:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return <div>
		<input value={value1} onChange={handleChange1} />
		<input value={value2} onChange={handleChange2} />
		
		<button onClick={handleClick}>btn</button>
		<p>result: {result}</p>
	</div>;
}

छोटे वर्जन का उपयोग किया जा सकता है:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	return <div>
		<input value={value1} onChange={event => setValue1(event.target.value)} />
		<input value={value2} onChange={event => setValue2(event.target.value)} />
		
		<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
		<p>result: {result}</p>
	</div>;
}

दो इनपुट, दो बटन और एक पैराग्राफ दिए गए हैं। इनपुट में नंबर दर्ज किए जाते हैं। पहले बटन के दबाने पर नंबरों का योग find करें, और दूसरे बटन के दबाने पर - गुणनफल (product)। परिणाम पैराग्राफ में output करें।

दो इनपुट, एक बटन और एक पैराग्राफ दिए गए हैं। इनपुट में 2025-12-31 फॉर्मेट में तारीखें दर्ज की जाती हैं। बटन के दबाने पर तारीखों के बीच का अंतर दिनों में find करें और परिणाम को पैराग्राफ में output करें।

पिछले task को ऐसे modify करें कि डिफॉल्ट रूप से इनपुट में current date सेट हो।

एक इनपुट और एक पैराग्राफ दिया गया है। इनपुट में एक नंबर दर्ज किया जाता है। फोकस खोने (blur) पर दर्ज किए गए नंबर के अंकों का योग पैराग्राफ में output करें।

एक इनपुट और एक पैराग्राफ दिया गया है। इनपुट में एक नंबर दर्ज किया जाता है। फोकस खोने (blur) पर दर्ज किए गए नंबर के divisors (भाजक) का गुणनफल (product) पैराग्राफ में output करें।