⛹️♀️
onClickイベントを親要素に伝播させない方法【React】
やりたいこと
子要素の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とは
参考記事
Discussion