Manejo de Eventos en JSX

Ahora estudiemos el trabajo con eventos en React. Por ejemplo, hagamos que al hacer clic en un bloque se muestre un alert con algún texto.

Supongamos que tenemos una función showMess, que muestra un alert con un mensaje, y en el código HTML hay un botón, en el que nos gustaría ver este alert al hacer clic:

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

Asociemos a nuestro botón el evento onclick para que al hacer clic en este div se ejecute la función showMess. Para esto necesitamos agregar el atributo onClick (precisamente en camelCase, es decir, onClick, y no onclick), y en él especificar la función que se ejecutará con este evento:

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

Así es como funciona el manejo de eventos: se agrega un atributo (por ejemplo, onClick o onFocus), y como valor del atributo se especifica el método que será llamado con este evento.

Dado el siguiente código:

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

Haz que al hacer clic en el primer botón se ejecute la primera función, y al hacer clic en el segundo botón - la segunda función.