Įvykių pridėjimas JSX

Dabar išnagrinėkime darbą su įvykiais React. Pavyzdžiui, padarykime taip, kad paspaudus ant bloko būtų išvestas alert su tam tikru tekstu.

Tarkime, kad turime funkciją showMess, kuri išveda alert su pranešimu, o HTML kode yra mygtukas, paspaudus ant kurio mes ir norėtume matyti šį alert:

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

Pririškime prie mūsų mygtuko įvykį onclick taip, kad paspaudus ant šio div suveiktų funkcija showMess. Tam reikia pridėti atributą onClick (būtent camelCase, tai yra onClick, o ne onclick), o jame nurodyti funkciją, kuri vyks šiuo įvykiu:

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

Taip ir vyksta darbas su įvykiais: pridedamas atributas (pavyzdžiui, onClick arba onFocus), atributo reikšme nurodomas metodas, kuris bus iškviestas šiuo įvykiu.

Duotas toks kodas:

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

Padarykite taip, kad paspaudus ant pirmo mygtuko veiktų pirmoji funkcija, o paspaudus ant antro mygtuko - antroji funkcija.