Δέσμευση Πεδίων Εισαγωγής σε Αντικείμενο στο React

Ας υποθέσουμε ότι η κατάσταση αποθηκεύει ένα αντικείμενο:

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

Εμφανίστε σε μια παράγραφο το έτος, τον μήνα και την ημέρα από την ημερομηνία που αποθηκεύεται στην κατάσταση, καθώς και την ημέρα της εβδομάδας που αντιστοιχεί σε αυτήν.

Τροποποιήστε την προηγούμενη εργασία, προσθέτοντας τρία πεδία εισαγωγής για επεξεργασία της ημερομηνίας.