TIL17. React Event handling

Event handling
「レスポンス」(React)領域でイベントを処理する方法は、次のとおりです.
やり方に似ている.
いくつかの文法の違いがあります.

Reactでは、イベント名にCamelCaseを使用する必要があります.

Reactでは、イベントハンドラ(イベントハンドラ)がJSX形式で関数をマークする.

HTMLとReactの違いを例に挙げてみましょう

//HTML
<button onclick="helloWorld()">
  hellow World
</button>

//React
<button onClick={helloWorld}>
  hellow World
</button>

上記の例では、イベント名をonClickなどのcamelCaseに設定します.
イベントハンドラの接続にはJSXタグ{}が使用されます.
イベントのデフォルトの動作をブロックする方法
HTMLではflaseを返します.イベントをブロックしたデフォルトの動作を返します.
Reactは、preventDefaultを使用してイベントの基本動作をブロックする.

...
<a href="#" handleClick="alert('clicked'); return false">
  Click me
</a>
...

...
    handleClick(e) {
        e.preventDefault();
        alert('clicked');
    }
...

e.stopPropagation()、e.preventDefault()差異e.preventDefault()は、一意の動作を中断することができる.e.stopPropagation()は、上流のエリメントへの活動の伝播を停止する.
Event Binding
イベントの最も重要な部分はbindingです.binding最も重要な理由はbindingが指定されていない場合、
これは、クラス内のイベント値ではなくトップレベルのウィンドウから値を取得できるためです.

render() {
    return (
      // 1. test1 - undefined
      // 2. test2 - event log
      <div>
        <button onClick={ function() {console.log(this)}}>test1</button>
        <br />
        <button onClick={() => console.log(this)}>test2</button>
      </div>
    );
}

上記の例では、test 1ボタンはバインドされず、コンソールにこの値が表示されます.
結果はundefindeです.
test 2ボタンはthis binding(矢印関数)を使用してこの値を示します.
対応するclass this値が結果として表示されます.