Reactガイドを読んでいくその7

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

イベント処理

今回も複数回に分けます。

ReactのイベントはcamelCaseで命名される。
JSXではイベントハンドラとして文字列ではなく関数を渡す。

// これはHTML
<button onClick="activateLasers()">
  Activate Lasers
</button>

// Reactではこう
<button onClidck={activateLasers}>
   Activate Lasers
</button>

Reactでは明示的にpreventDefaultを呼び出さない限りfalseを返してもデフォルトの動作を抑止することができない。　　

function ActionLink() {
  function handleClick(e) {
    // eはsynthetic
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

synthetic:
合成イベント (SyntheticEvent) – React

少ないですが、今日はここまで。