Xử lý dữ liệu biểu mẫu khi nhấn nút trong React

Trong bài học trước, chúng ta đã làm sao cho khi nhập một ký tự vào ô đầu vào, kết quả sẽ ngay lập tức xuất hiện trong đoạn văn. Điều này, tất nhiên, trông rất đẹp mắt nhưng có một nhược điểm.

Hãy tưởng tượng chúng ta cần thực hiện một thao tác "nặng", tốn nhiều tài nguyên. Sẽ không tối ưu nếu làm điều đó cho mỗi lần nhập ký tự - tốt hơn là chờ cho đến khi việc nhập dữ liệu hoàn tất và sau đó thực hiện thao tác cần thiết một lần và hiển thị kết quả trong đoạn văn.

Để làm điều này, chúng ta cần thêm một nút, khi nhấn vào đó thao tác tốn tài nguyên của chúng ta sẽ được thực hiện. Trong trường hợp như vậy, mỗi ô đầu vào sẽ lại tương ứng với trạng thái riêng của nó, cộng thêm một trạng thái nữa chúng ta cần để ghi kết quả của thao tác và hiển thị nó trên màn hình.

Hãy xem một ví dụ. Giả sử chúng ta có hai ô đầu vào và một nút. Khi nhấn vào nút, hãy tìm tổng của các số được nhập vào các ô đầu vào.

Hãy thực hiện:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return <div>
		<input value={value1} onChange={handleChange1} />
		<input value={value2} onChange={handleChange2} />
		
		<button onClick={handleClick}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Có thể sử dụng phiên bản rút gọn:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	return <div>
		<input value={value1} onChange={event => setValue1(event.target.value)} />
		<input value={value2} onChange={event => setValue2(event.target.value)} />
		
		<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Cho hai ô đầu vào, hai nút và một đoạn văn. Giả sử các số được nhập vào các ô đầu vào. Khi nhấn vào nút thứ nhất, hãy tìm tổng các số, và khi nhấn vào nút thứ hai - hãy tìm tích. Kết quả được xuất ra đoạn văn.

Cho hai ô đầu vào, một nút và một đoạn văn. Giả sử vào các ô đầu vào nhập ngày tháng theo định dạng 2025-12-31. Khi nhấn vào nút, hãy tìm sự khác biệt giữa các ngày theo đơn vị ngày và xuất kết quả ra đoạn văn.

Hãy sửa đổi bài toán trước đó sao cho mặc định trong các ô đầu vào là ngày hiện tại.

Cho một ô đầu vào và một đoạn văn. Một số được nhập vào ô đầu vào. Khi mất tiêu điểm, hãy xuất ra đoạn văn tổng các chữ số của số đã nhập.

Cho một ô đầu vào và một đoạn văn. Một số được nhập vào ô đầu vào. Khi mất tiêu điểm, hãy xuất ra đoạn văn tích các ước số của số đã nhập.