Навязванне падзей у JSX

Давайце зараз вывучым працу з падзеямі на React. Напрыклад, зробім так, каб па кліку на блок выводзіўся alert з нейкім тэкстам.

Хай у нас ёсць функцыя showMess, якая выводзіць alert з паведамленнем, а ў HTML кодзе ёсць кнопка, па кліку на якую нам і хацелася б бачыць гэты alert:

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

Давайце прывяжам да нашай кнопкі падзею onclick так, каб па кліку на гэты дзів спрацоўвала функцыя 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>;
}

Зрабіце так, каб па кліку на першую кнопку спрацоўвала першая функцыя, а па кліку на другую кнопку - другая функцыя.