रिएक्ट में ऑब्जेक्ट से इनपुट बाइंडिंग

मान लीजिए कि स्टेट में एक ऑब्जेक्ट संग्रहीत है:

const initObj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3',
}

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

आइए हमारे ऑब्जेक्ट की प्रत्येक प्रॉपर्टी को एक अलग इनपुट में प्रदर्शित करें:

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		<input value={obj.prop1} />
		<input value={obj.prop2} />
		<input value={obj.prop3} />
		
		<br />
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

आइए अब प्रत्येक इनपुट को onChange इवेंट से बांधें। हैंडलर के रूप में एक सामान्य फ़ंक्शन नियुक्त करें:

function App() {
	const [obj, setObj] = useState(initObj);
	
	return <div>
		<input value={obj.prop1} onChange={event => handleChange('prop1', event)} />
		<input value={obj.prop2} onChange={event => handleChange('prop2', event)} />
		<input value={obj.prop3} onChange={event => handleChange('prop3', event)} />
		
		<br />
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

जैसा कि आप देख रहे हैं, फ़ंक्शन handleChange पहले पैरामीटर के रूप में संबंधित ऑब्जेक्ट प्रॉपर्टी का नाम स्वीकार करता है।

आइए हमारे फ़ंक्शन का कार्यान्वयन लिखें:

function handleChange(prop, event) {
	const copy = Object.assign({}, obj);
	copy[prop] = event.target.value;
	setObj(copy);
}

यह कार्यान्वयन कार्यात्मक है, लेकिन इसे सरल बनाया जा सकता है, यदि ऑब्जेक्ट के कंप्यूटेड प्रॉपर्टी नामों का उपयोग किया जाए:

function handleChange(prop, event) {
	setObj({...obj, ...{[prop]: event.target.value}});
}

आइए सारे कोड को एक साथ संग्रहित करें:

function App() {
	const [obj, setObj] = useState(initObj);
	
	function handleChange(prop, event) {
		setObj({...obj, ...{[prop]: event.target.value}});
	}
	
	return <div>
		<input value={obj.prop1} onChange={event => handleChange('prop1', event)} />
		<input value={obj.prop2} onChange={event => handleChange('prop2', event)} />
		<input value={obj.prop3} onChange={event => handleChange('prop3', event)} />
		
		<br />
		{obj.prop1}-{obj.prop2}-{obj.prop3}
	</div>;
}

मान लीजिए कि स्टेट में एक तिथि वाला ऑब्जेक्ट संग्रहीत है:

const initDate = {
	year:  2025,
	month: 12,
	day:   31,
}

स्टेट में संग्रहीत तिथि से वर्ष, महीना और दिन, और उसके अनुरूप सप्ताह का दिन एक पैराग्राफ में प्रदर्शित करें।

तिथि संपादन के लिए तीन इनपुट जोड़कर पिछली समस्या को संशोधित करें।