Kuunganisha Viingizo kwa Kitu katika React

Acha kwenye hali hifadhiwe kitu:

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

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

Wacha tuonyeshe kila sifa ya kitu chetu katika kizingilio tofauti:

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

Sasa tuiunganishe kila kizingilio tukio onChange. Kama kichakataji tuteue utendaji wa pamoja:

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

Kama unavyoona, utendaji handleChange hupokea jina la sifa inayofanana ya kitu kama parameta ya kwanza.

Wacha tuandike utekelezaji wa utendaji wetu:

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

Utekelezaji huu unafanya kazi, lakini unaweza kurahisishwa, kwa kutumia majina yanayoweza kuhesabiwa ya sifa za kitu:

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

Wacha tuchanganye msimbo wote pamoja:

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

Acha kwenye hali hifadhiwe kitu chenye tarehe:

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

Onyesha kwenye aya mwaka, mwezi na siku kutoka kwa tarehe, iliyohifadhiwa kwenye hali, na pia siku ya wiki, inayofanana nayo.

Rekebisha kazi iliyotangulia, kwa kuongeza viingizo vitatu kwa ajili ya kuhariri tarehe.