問題一覧に戻る
初級イベント処理
問題32: イベントオブジェクト

event.targetの使用方法とイベント情報の取得方法を学びます。イベントオブジェクトから様々な情報を取得しましょう。

import React from 'react';

function EventInfo() {
  // クリックイベント処理
  const handleClick = (e) => {
    console.log("タイプ:", e.)
    console.log("タグ名:", e.target.);
    console.log("クラス:", e.target.);
  };

  return (
    <div>
      <button className="btn" onClick={handleClick}>
        クリック
      </button>
      {/* 入力イベント */}
      <input onChange={(e) => console.log(e.target.)} />
    </div>
  );
}

export default EventInfo;
···