[React] TR Link안에 TD하나만 Link안보내기

 

 

 

 

 

다음과 같은 리스트에서 어느 곳을 눌러도 디테일로 보내고는 싶은데,
셀렉트를 눌렀을 때는 셀렉트가 활성화돼서 활성화, 비활성화를 골라야 하는데
셀렉트를 누르면 바로 디테일로 가버린다.. 

  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>

결과는 성공적이지만 다른 좋은 방법이 있나 찾아봐야 될 듯하다.