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>;
}

Биринчи баскычка чыкылдатуу менен биринчи функция иштеши, ал эми экинчи баскычка чыкылдатуу менен - экинчи функция иштеши үчүн керектүү өзгөртүүлөрдү жасаңыз.