Anexando eventos em JSX

Vamos agora estudar como trabalhar com eventos no React. Por exemplo, vamos fazer com que ao clicar em um bloco, um alert com algum texto seja exibido.

Suponha que temos uma função showMess, que exibe um alert com uma mensagem, e no código HTML há um botão, no qual gostaríamos que ao ser clicado exibisse este alert:

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

Vamos vincular ao nosso botão o evento onclick para que, ao clicar nesta div, a função showMess seja executada. Para isso, precisamos adicionar o atributo onClick (exatamente em camelCase, ou seja, onClick, e não onclick), e nele especificar a função que será executada por este evento:

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

É assim que funciona o trabalho com eventos: adiciona-se um atributo (por exemplo, onClick ou onFocus), e o valor do atributo é o método que será chamado por este evento.

Dado o seguinte código:

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

Faça com que, ao clicar no primeiro botão, a primeira função seja executada, e ao clicar no segundo botão - a segunda função.