- 投稿日:2023年04月19日 09時37分10秒
- 更新日:2023年04月19日 09時37分12秒
targetの中身が子要素になる
onClickを設定した要素がありその子要素をクリックした場合、伝播して親要素のonClickが発火する。しかしイベント変数のtargetの中身はイベントが発生した要素になるため子要素が入ってくる。
function handleClick(event){
console.log(event.target); // これで取れるのはイベントが発生した要素
}
<Button
value="test"
onClick={(e) => handleClick(e)}
>
<Icon style={{ height: '100%' }} >
<AddCircleOutlineIcon/>
</Icon>
</Button>
上記のようなコードでIcon部分をクリックした場合、event.targetの中身がIconになるということ。
必ずonClickイベントを記述した要素が欲しければイベント変数のcurrentTargetを取得する。
function handleClick(event){
console.log(event.currentTarget); // これで取れるのはイベントが発生した要素
}