Mengikat Input kepada Objek dalam React

Katakan dalam state disimpan satu objek:

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

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

Mari kita keluarkan setiap sifat objek kita dalam input yang berasingan:

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

Sekarang mari kita ikat setiap input dengan peristiwa onChange. Sebagai pengendali, tetapkan satu fungsi umum:

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

Seperti yang anda lihat, fungsi handleChange menerima nama sifat objek yang sepadan sebagai parameter pertama.

Mari kita tulis pelaksanaan fungsi kita:

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

Pelaksanaan ini berfungsi, tetapi ia boleh dipermudahkan jika menggunakan nama sifat objek yang boleh dikira:

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

Mari kita kumpulkan semua kod bersama:

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

Katakan dalam state disimpan satu objek dengan tarikh:

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

Keluarkan dalam perenggan tahun, bulan dan hari dari tarikh yang disimpan dalam state, serta hari dalam minggu yang sepadan dengannya.

Ubah suai tugas sebelumnya dengan menambah tiga input untuk mengedit tarikh.