[LAB-9] 버튼 선택시 값을 불러오려고 하는데 포함된 다른 엘리먼트들 때문에 접근이 안됩니다.

문제 상황

반려동물 선택이라고 되어있는 부분 아래의 작은 버튼들을 선택하려고 합니다.

이렇게 키보드 탭키로 접근했을 경우엔, 버튼을 선택한 것으로 잘 받아들이고 해당값을 잘 불러옵니다. (e.target.value)

그러나 마우스로 접근하려고 할 경우, 버튼태그 안에 포함된 figure 태그에 접근합니다..

버블링을 막기위해서 figure 태그 자체에 e.stopPropagation()을 걸어주었으나, button 태그 자체에 패딩이 존재하지 않다보니 버튼 전체를 피규어로 인식하여 값을 얻기엔 불가능합니다.

디자인 적으로는 저렇게 유지해야하는데, 어떻게 버튼에 접근하여 value값을 얻을 수 있을까요?

버블링을 냅둘경우엔 (e.target 접근) 이미지 클릭시 이미지태그가, 텍스트 클릭시엔 figcaption 태그에 접근됩니다.

해당 부분 코드

접근 권한

@qorbaxk 님. Firestore에 접근할 수 있는 권한(.env 파일 없음)이 없어 질문과 동일한 상황을 구현할 수 없습니다.

문제 원인

e.target은 이벤트가 전파(발생)된 대상을 가리킵니다. 버튼에 연결된 이벤트는 내부의 요소로 전파 되므로 질문과 같은 상황에서 버튼을 가리키지 않는 것입니다.

문제 해결

이벤트가 직접 연결된 대상은 e.currentTarget을 사용합니다.

currentTarget 인터페이스 의 읽기 전용 속성은 이벤트(Event)가 DOM을 통과(전파)할 때 이벤트의 현재 대상(current target)을 가리킵니다. 이는 항상 이벤트 핸들러가 첨부된 요소를 참조 하며, Event.target 이벤트가 발생한 요소를 식별하고 그 자손이 될 수 있는 요소를 식별합니다.

onFocusPet 함수를 아래와 같이 수정한 후 확인해보세요.

const onFocusPet = (e: React.MouseEvent<HTMLButtonElement>) => {
  // e.currrentTarget은 이벤트를 직접 연결한 <button> 요소를 가리킴
  console.log(e.currentTarget)
}

yamoo9 / likelion-FEQA