【React】イベントについて

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); // これで取れるのはイベントが発生した要素
}

SPECIAL THANKS

1. 子要素クリック時の親要素のクリックイベントの挙動 -すな.dev-