Дар 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,
}

Дар абзас сол, моҳ ва рӯзи санаеро, ки дар ҳолат нигоҳ дошта мешавад, инчунин рӯзи ҳафта, ба он мувофиқро, намоиш диҳед.

Вазифаи қаблиро таҳрир кунед, барои таҳрири сана се воридкунӣ илова кунед.