イベント

イベントは、キーボードやマウスなどの入力を受けてアプリケーションを対話的にしたり、画像の読み込みなどの変更に反応したりする方法です。Preact でのイベントは DOM と同じように機能します。MDN で見つかるイベントのタイプや動作は、Preact でも使用できます。以下は、命令型の DOM API を使用してイベントハンドラを登録する方法の例です。

function clicked() {
  console.log('clicked')
}
const myButton = document.getElementById('my-button')
myButton.addEventListener('click', clicked)

Preact が DOM API と異なる点は、イベントハンドラを登録する方法です。Preact では、イベントハンドラは style や class と同様に、要素のプロパティとして宣言的に登録されます。一般的に、「on」で始まる名前を持つプロパティはすべてイベントハンドラです。イベントハンドラプロパティの値は、そのイベントが発生したときに呼び出されるハンドラ関数です。

たとえば、ボタンの「click」イベントを、ハンドラ関数を値として持つ onClick プロパティを追加することで、リッスンできます。

function clicked() {
  console.log('clicked')
}
<button onClick={clicked}>

イベントハンドラ名は、すべての大文字小文字が区別されます。ただし、Preact は、標準イベントタイプ (click、change、touchmove など) を要素 (div、button など) に登録するときに検出し、内部で適切なケースを使用します。そのため、イベントが 「クリック」 (小文字) であっても、<button onClick={..}> が機能します。

試してみましょう

このチャプターを完了するには、自分自身の click ハンドラを右側のボタン要素の JSX に追加してみましょう。ハンドラの内で、上記のように console.log() を使用してメッセージを記録します。

コードが実行されたら、ボタンをクリックしてイベントハンドラを呼び出し、次のチャプターに進みましょう。