Gắn sự kiện trong JSX

Bây giờ hãy cùng tìm hiểu cách làm việc với sự kiện trong React. Ví dụ, hãy làm sao để khi nhấp chuột vào một khối sẽ hiển thị alert với một văn bản nào đó.

Giả sử chúng ta có hàm showMess, hàm này hiển thị alert với một thông báo, và trong mã HTML có một nút bấm, khi nhấp vào đó chúng ta muốn thấy alert này:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

Hãy gắn sự kiện onclick cho nút bấm của chúng ta sao cho khi nhấp vào khối div này thì hàm showMess sẽ được thực thi. Để làm điều này cần thêm thuộc tính onClick (chính xác là camelCase, tức là onClick, chứ không phải onclick), và trong đó chỉ định hàm sẽ được thực thi theo sự kiện này:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

Đó là cách làm việc với sự kiện: thêm một thuộc tính (ví dụ: onClick hoặc onFocus), giá trị của thuộc tính chỉ định phương thức sẽ được gọi theo sự kiện đó.

Cho đoạn mã sau:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

Hãy làm sao để khi nhấp vào nút đầu tiên thì hàm đầu tiên được thực thi, còn khi nhấp vào nút thứ hai - thì hàm thứ hai được thực thi.