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

codeCYJ·2022년 7월 21일
0

project

목록 보기
3/3


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

  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>

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

profile
안녕하세요

0개의 댓글