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

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

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

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

このボタンにonclickイベントをバインドして、 このdivがクリックされたときに関数showMessが 実行されるようにしましょう。そのためには、 属性onClick（キャメルケース、つまりonClickであり、 onclickではありません）を追加し、 その値にこのイベントで実行される関数を指定します。

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

このようにしてイベント処理は行われます： 属性（例：onClickやonFocus）を追加し、 属性の値にそのイベントで呼び出されるメソッドを指定します。

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