Прикачане на събития в JSX

Нека сега изучим работата със събития в React. Например, нека направим така, че при кликване върху блок да се показва alert с някакъв текст.

Нека имаме функция showMess, която показва alert със съобщение, а в HTML кода има бутон, при кликване върху който бихме искали да видим този alert:

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

Нека прикажем към нашия бутон събитието onclick така, че при кликване върху този div да се задейства функцията showMess. За това трябва да се добави атрибут onClick (точно в camelCase, тоест onClick, а не onclick), а в него да се посочи функцията, която ще се изпълни при това събитие:

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

По този начин се осъществява работата със събития: добавя се атрибут (например onClick или onFocus), като стойност на атрибута се посочва метод, който ще бъде извикан при това събитие.

Даден е следният код:

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

Направете така, че при кликване на първия бутон да се задейства първата функция, а при кликване на втория бутон - втората функция.