Die binding van insetvelde aan 'n objek in React

Laat daar 'n objek in die toestand gestoor wees:

const initObj = {
	prop1: 'waarde1',
	prop2: 'waarde2',
	prop3: 'waarde3',
}

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

Kom ons toon elke eienskap van ons objek in 'n aparte insetveld:

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

Kom ons koppel nou die gebeurtenis onChange aan elke insetveld. Ons sal een algemene funksie as die hanterer toewys:

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

Soos jy kan sien, neem die funksie handleChange as eerste parameter die naam van die ooreenstemmende objekeienskap.

Kom ons skryf die implementering van ons funksie:

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

Hierdie implementering werk, maar dit kan vereenvoudig word deur berekende eienskapname van objekte te gebruik:

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

Kom ons saam die hele kode:

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

Laat daar 'n datumobjek in die toestand gestoor wees:

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

Vertoon in 'n paragraaf die jaar, maand en dag uit die datum wat in die toestand gestoor is, asook die dag van die week wat daarmee ooreenstem.

Wysig die vorige taak deur drie insetvelde vir die wysiging van die datum by te voeg.