問題一覧に戻る
初級イベント処理
問題35: イベントの伝播

stopPropagationの使用方法とバブリングの制御を学びます。イベントが親要素に伝播するのを防ぐ方法を理解しましょう。

import React from 'react';

function EventBubble() {
  // 親要素のハンドラー
  const handleParent = () => {
    console.log("親");
  };

  // 子要素のハンドラー
  const handleChild = () => {
    console.log("子");
    // バブリングを止める
    e.();
  };

  return (
    <div onClick={handleParent} style={{ padding: 20, border: "1px solid" }}>
      親要素
      <button onClick={}>
        子要素
      </button>
    </div>
  );
}

export default EventBubble;
···