⛹️‍♀️

onClickイベントを親要素に伝播させない方法【React】

2022/06/30に公開

やりたいこと

子要素のonClickイベントを親要素に伝播させないようにしたい。

現在:子要素のonClickイベントであるtoggleMemoIsFixedを発火させた時に、
親要素のClickイベント(openModal)まで発火してしまう。

---省略---
 return(
  <div onClick={() => openModal(memo)}>
      <nav className="flex justify-between">
	 <div>{memo.title}</div>
         <PinButton toggleMemoIsFixed={props.toggleMemoIsFixed} memo={memo} />
      </nav>
      <div>{memo.body}</div>
  </div>

解決方法

子要素にevent.stopPropagation();を追加する

const toggleMemoIsFixed = (id:number, event: React.MouseEvent<HTMLButtonElement>) => {
      const newMemos = [...memoList];
      const index = newMemos.findIndex((memo) => memo.id === id);
      event.stopPropagation(); // NOTE: onClickイベントを親要素に伝播させないため(モーダルを反応させない)
      newMemos[index].isFixed = !newMemos[index].isFixed
      newMemos[index].pinnedAt = new Date().getTime();
      setMemoList(newMemos);
      updateStoredMemos(newMemos);
    }

stopPropagationとは

https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

参考記事

https://www.yoheim.net/blog.php?q=20180416
https://www.happylifecreators.com/blog/20211126/

Discussion