Aggiunta di eventi in JSX

Ora studiamo come lavorare con gli eventi in React. Ad esempio, facciamo in modo che cliccando su un blocco venga visualizzato un alert con un certo testo.

Supponiamo di avere una funzione showMess, che visualizza un alert con un messaggio, e nel codice HTML abbiamo un pulsante, sul cui click vorremmo vedere questo alert:

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

Colleghiamo al nostro pulsante l'evento onclick in modo che cliccando su questo div venga eseguita la funzione showMess. Per fare questo è necessario aggiungere l'attributo onClick (proprio in camelCase, cioè onClick, e non onclick), e in esso specificare la funzione che verrà eseguita per questo evento:

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

Ed è così che funziona la gestione degli eventi: si aggiunge un attributo (ad esempio, onClick o onFocus), come valore dell'attributo si specifica il metodo che verrà chiamato per quell'evento.

Dato il seguente codice:

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

Fai in modo che cliccando sul primo pulsante venga eseguita la prima funzione, e cliccando sul secondo pulsante - la seconda funzione.