Liên kết đầu vào với đối tượng trong React

Giả sử trong state lưu trữ một đối tượng:

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

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

Hãy hiển thị từng thuộc tính của đối tượng chúng ta trong một đầu vào riêng biệt:

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

Bây giờ hãy liên kết sự kiện onChange với mỗi đầu vào. Chúng ta sẽ chỉ định một hàm chung làm trình xử lý:

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

Như bạn thấy, hàm handleChange nhận tên của thuộc tính tương ứng trong đối tượng làm tham số đầu tiên.

Hãy viết triển khai cho hàm của chúng ta:

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

Cách triển khai này hoạt động được, nhưng có thể đơn giản hóa nó bằng cách sử dụng tên thuộc tính được tính toán của đối tượng:

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

Hãy kết hợp tất cả mã lại với nhau:

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

Giả sử trong state lưu trữ một đối tượng ngày tháng:

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

Hiển thị trong một đoạn văn năm, tháng và ngày từ ngày tháng được lưu trữ trong state, cùng với thứ trong tuần tương ứng với nó.

Sửa đổi bài toán trước đó bằng cách thêm ba đầu vào để chỉnh sửa ngày tháng.