Воқеаҳоро дар 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>;
}

Тавре кунед, ки клик кардан рӯи тугмаи аввал функсияи аввалро корӣ кунад, ва клик кардан рӯи тугмаи дуюм - функсияи дуюмро.