Obsługa zdarzeń w JSX

Przeanalizujmy teraz obsługę zdarzeń w React. Na przykład, sprawmy, aby po kliknięciu w blok wyświetlał się alert z pewnym tekstem.

Załóżmy, że mamy funkcję showMess, która wyświetla alert z komunikatem, a w kodzie HTML znajduje się przycisk, po kliknięciu którego chcielibyśmy zobaczyć ten alert:

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

Przypiszmy do naszego przycisku zdarzenie onclick tak, aby po kliknięciu w ten div uruchamiała się funkcja showMess. Aby to zrobić, należy dodać atrybut onClick (właśnie w camelCase, czyli onClick, a nie onclick), a w nim określić funkcję, która zostanie wykonana w ramach tego zdarzenia:

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

W ten sposób odbywa się praca ze zdarzeniami: dodawany jest atrybut (na przykład onClick lub onFocus), a jako wartość atrybutu określa się metodę, która zostanie wywołana w ramach tego zdarzenia.

Dany jest następujący kod:

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

Spraw, aby po kliknięciu w pierwszy przycisk wywoływała się pierwsza funkcja, a po kliknięciu w drugi przycisk - druga funkcja.