Bidindung von Inputs an ein Objekt in React

Angenommen, im State wird ein Objekt gespeichert:

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

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

Lassen Sie uns jede Eigenschaft unseres Objekts in einem separaten Input ausgeben:

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

Binden wir nun an jeden Input das Ereignis onChange. Als Handler weisen wir eine gemeinsame Funktion zu:

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

Wie Sie sehen können, erhält die Funktion handleChange als ersten Parameter den Namen der entsprechenden Eigenschaft des Objekts.

Lassen Sie uns die Implementierung unserer Funktion schreiben:

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

Diese Implementierung ist funktionsfähig, kann aber vereinfacht werden, wenn man berechnete Eigenschaftsnamen des Objekts verwendet:

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

Fassen wir den gesamten Code zusammen:

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

Angenommen, im State wird ein Objekt mit einem Datum gespeichert:

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

Geben Sie in einem Absatz das Jahr, den Monat und den Tag aus dem im State gespeicherten Datum aus, sowie den dazugehörigen Wochentag.

Modifizieren Sie die vorherige Aufgabe, indem Sie drei Inputs zur Bearbeitung des Datums hinzufügen.