[Reactstrap] DropdownItem에 Custom Component 넣고 싶은 경우 처리

상위 Header 영역 같은 경우에는 dropdown 컴포넌트로 구성하는 경우가 많은 것으로 알고 있다. 

특정 기능을 만들다가 dropdown 하위로 있는 dropdownItem 에 customInput인 switch를 넣게 되었는데 

이게... 스위치를 toggle하면 toggle 이벤트에 타기도 전에 그냥 dropdown만 닫겨버리는 현상이 발생...

 

결론적으로 이것 때문에 한 두시간 잡았던거 같은데 

애시당초 잘못 접근 했던게 아! 이게 스위치를 토글하기 전에 dropdownItem 쪽 이벤트에서 가로채서 먼저 클릭하니 닫아버리는구나! 라고 생각해서 이벤트 버블링만 막으면 되는 줄 알고 계속 관련 처리만 했는데 죽어도 스위치 토글 이벤트에는 타지도 않더라

 

이럴땐 다시 리셋! 처음으로 돌아가서 

그래 공식 document를 보자! 

dropdownItem 컴포넌트에도 toggle 상태값을 제공해준다... 해당 item에 toggle만 false로 줘도 해결...

하... 상상의 나래를 펴지 말자...

 

어찌됐든 앞으로는 비슷한 경우가 생기면 또 시행착오를 겪을 일은 없게 되었으니 어찌됐든 성공적!