JSXにおけるイベントの登録

それでは、Reactでのイベント処理について学んでみましょう。例えば、ブロックをクリックしたときに何らかのテキストを含む alertを表示するようにしてみます。

メッセージを含むalertを表示する関数showMessがあり、 HTMLコードにはボタンがあり、このボタンをクリックしたときにそのalertを見たいとします。

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

このボタンにonclickイベントをバインドして、このdivがクリックされたときに関数showMessが実行されるようにしましょう。そのためには、属性onClick（キャメルケース、つまり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>;
}

最初のボタンをクリックしたときに最初の関数が実行され、 2番目のボタンをクリックしたときに2番目の関数が実行されるようにしてください。