React Basic:イベントハンドル

JavaScriptでアクティビティを管理したのを覚えていますか?Reactはもちろんイベントを処理する機能も提供しています.イベントが動的なWeb開発である以上、Reactのイベントハンドルについて説明しましょう.

レスポンスのイベントハンドル

ReactのイベントハンドルはJavaScriptのイベントハンドルに似ています.HTML DOMに対して何らかの操作を行うと、予め設定されたイベントが発生します.
また、イベントが発生すると、Webページが動的に変更されます.
reactでは,ほとんどのコードがjsxで記述されているため,jsxでは当然イベントハンドルもイベントを処理できるように設計されている.

前に述べたReactの特徴の1つは仮想DOMであり,React内のイベントを管理する場合でも中間に位置する.
イベント処理の詳細については、上記の画像を参照してください.

イベントハンドルの例

JavaScriptでイベントを処理するとき、2つのプロセスを経験しました.
まず,JavaScriptを用いてイベント発生時に適用するコードを入力する.
次に、対応するDOMを見つけて、アクティビティをPropertyに追加します.
Reactのイベントハンドルの方が簡単です.

class Comp extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => {
          console.log('clicked');
        }}>클릭</button>
      </div>
    );
  }
}

コンポーネントを作成するjsxにbutton要素を作成し、onClickをbutton要素のpropertyとします.
このボタンをクリックすると、コンソールには「clicked」メッセージが表示されます.
JavaScriptとの違いは、イベントハンドルプロファイルを追加するときに、onClickなどのCamel Caseとして作成することです.
(もちろん、ほとんどのIDE(VSCなど)は自動的に完了しているので、心配する必要はありません.)

イベント処理時の注意事項!

まず、最初に、上記のように、アルパカcaseのみが許可されます.
onClickじゃないonClickじゃないonmouseenterじゃないonMousEnter
編集が自動完了をサポートしている場合は、知るだけでいいです.
また、イベントハンドルは常にイベント={関数}のフォーマットを使用します.
前の例では、onClickを作成し、矢印関数を使用してコンソールにメッセージを出力することもできます.
これは実際にJavaScriptで使用されているaddEventListenerの原理と同じです.addEventListenerは、作成した関数や無記名関数をパラメータとして入れるのと似ています.
最後に、イベントハンドルは実際のDOM要素にのみ適用されます.
例のbutton要素と同様に、実際に存在するDOM要素にのみ適用されます.
実際に存在するDOM要素(例えばreact素子)でない場合、イベントハンドラはイベントハンドラとして処理されず、propsとして処理される.