問題一覧に戻る
初級イベント処理
問題34: 合成イベント

Reactのイベントシステムを理解します。合成イベントがクロスブラウザ対応を実現する仕組みを学びましょう。

import React from 'react';

function SyntheticDemo() {
  // 合成イベント
  const handleEvent = (e) => {
    // ネイティブイベント
    console.log("合成:", e.);
    console.log("ネイティブ:", e.);
    
    // イベントを保持
    e.();
    setTimeout(() => {
      console.log("遅延:", e.type);
    }, 1000);
  };

  return (
    <div onClick={handleEvent}>
      <button>クリック</button>
    </div>
  );
}

export default SyntheticDemo;
···