다음과 같은 리스트에서 어느곳을 눌러도 디테일로 보내고는 싶은데,
셀렉트를 눌렀을 때는 셀렉트가 활성화되서 활성화, 비활성화를 골라야하는데
셀렉트를 누르면 바로 디테일로 가버린다.. ㅜ
const handleDetail = (id: number) => {
navigate(`${id}`);
};
<TR onClick={() => handleDetail(id)}>
<TD>{id}</TD>
<TD>{name}</TD>
...
<TD><Select id={id} is_show={is_show} /></TD>
</TR>
어떻게해야되나 고민하다 select TD에서 이벤트를 해제시켜보기로 했다.
e.stopPropagation
이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다.
const handleDetail = (id: number) => {
navigate(`${id}`);
};
const handleCancel = (
event: React.MouseEvent<HTMLTableDataCellElement, MouseEvent>
) => {
event.stopPropagation();
};
<TR onClick={() => handleDetail(id)}>
<TD>{id}</TD>
<TD>{name}</TD>
...
<TD onClick={(event) => handleCancel(event)}>
<Select id={id} is_show={is_show} />
</TD>
</TR>
결과는 성공적!
이지만 다른 좋은 방법이 있나 찾아봐야 될 듯 하다.