반응형
부모 영역에서는 클릭하면 상세 페이지로 들어가는 이벤트가 있고,
자식 영역에서는 클릭하면 다른 상세 페이지로 들어가는 이벤트가 있다.
이 때는 부모 영역을 클릭하더라도 자식 이벤트 발생 후 부모 이벤트가 발생한다.
이는 부모 영역이 자식의 영역을 덮고 있어 이벤트 버블링이 발생하여 생긴 이슈이다.
이를 해결하기 위해서는 이벤트 객체를 받아 중지시키는 stopPropagation() 함수를 사용하면 된다.
결과화면 미리보기
**이벤트 버블링이란 (더보기클릭)
더보기
자식함수가 부모 내부에 존재하기 때문에 떨어진 물방울이 바깥으로 번지듯이 자식 → 부모 순으로 이벤트가 실행이 된다.
React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링)
Detail.tsx
자식태그의 onClick 함수인 goToBill()을 실행하기 전에 stopPropagation() 함수를 실행해주자.
const goToBill = useCallback((id) => {
if (!props.bill.id) {
return;
}
history.push(`/bill/${bill.id}`);
},[props.bill.id]
);
<div onClick={() => goToDetail()}>
<p>상세내용 자세히보기</p>
<div>비용</div>
<div
onClick={e => {
e.stopPropagation(); // 이벤트방지함수를 먼저 실행하면
goToBill(bill.id); // 생각한대로 실행이 된다.
}}
>
영수증 자세히 보기
</div>
</div>
반응형
'React' 카테고리의 다른 글
Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 (0) | 2022.01.07 |
---|---|
Styled-components(2) global 스타일 세팅하기 (0) | 2022.01.04 |
React(54) 타입스크립트 - 버튼 클릭시 버튼 색상 변경하기 (0) | 2021.12.02 |
React(53) 타입스크립트 - 체크박스 약관 선택 이벤트 / 자식에서 부모로 데이터 보내기 (0) | 2021.11.16 |
React(52) 타입스크립트 - 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 (0) | 2021.11.01 |
댓글