반응의 onClick 핸들러를 사용하여 href "새 탭에서 열기" 유지

반응의 onClick 핸들러를 사용하여 href "새 탭에서 열기" 유지

테이블 셀에 올바르게 부팅되는 onClick(React) 핸들러가 있는데, 이 핸들러가 정상적으로 부팅되는 경우href태그에 붙이면 알 수 있어요.

물론 두 요소를 하나의 요소로 결합하려고 하는 것은 예상대로 작동하지 않습니다.

<td onClick={this.someFunction} href="someLink">
  ...some content
<td>

이전에 테이블 셀 안에 네스트된 앵커 태그가 풀 하이트에 걸쳐 있는 것을 검토했으므로 셀의 내용을 오른쪽 클릭할 때마다 "새로운 탭에서 열기"를 계속 유지할 수 있습니다.onClick테이블 셀 요소의 핸들러.그러나 이 접근법에는 다양한 문제가 있습니다.

TLDR: 재정의하면 다른 문제가 발생합니다.솔루션에는 다양한 호환성 문제가 있습니다.

그래서 나는 위에서 설명한 접근방식을 포기했다.아이디어/제안?앵커/href를 사용하지 않고 "새 탭에서 열기" 옵션을 사용할 수 있는 방법이 있습니까?

여기에는 두 가지 옵션이 있습니다. JS를 사용하여 새 창/탭에서 열 수 있습니다.

<td onClick={()=> window.open("someLink", "_blank")}>text</td>

그러나 일반 링크를 사용하되 테이블 셀로 스타일링하는 것이 더 좋습니다.

<a style={{display: "table-cell"}} href="someLink" target="_blank">text</a>

가장 안전한 솔루션, JS만

alko989에서 언급한 바와 같이 보안상의 큰 결함이 있습니다._blank(여기에 표시).

순수 JS 코드로부터 피하려면:

const openInNewTab = (url) => {
  const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
  if (newWindow) newWindow.opener = null
}

그 후, 에 추가해 주세요.onClick

onClick={() => openInNewTab('https://stackoverflow.com')}

반응 속도를 높이려면 함수를 직접 반환할 수 있습니다.

const onClickUrl = (url) => {
  return () => openInNewTab(url)
}

onClick={onClickUrl('https://stackoverflow.com')}

Typescript + React의 경우 다음과 같습니다.

export const openInNewTab = (url: string): void => {
  const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
  if (newWindow) newWindow.opener = null
}

export const onClickUrl = (url: string): (() => void) => () => openInNewTab(url)

세 번째window.openparam은 필요에 따라 이러한 옵션 값을 사용할 수도 있습니다.

@gunn의 답변은 정확합니다.target="_blank새 탭에서 링크를 엽니다.

그러나 이는 사용자의 페이지에 보안 위험이 될 수 있습니다. 자세한 내용은 여기를 참조하십시오.이를 위한 간단한 솔루션이 있습니다.rel="noopener noreferrer".

<a style={{display: "table-cell"}} href = "someLink" target = "_blank" 
rel = "noopener noreferrer">text</a>

React + TypeScript 인라인 util 메서드:

const navigateToExternalUrl = (url: string, shouldOpenNewTab: boolean = true) =>
shouldOpenNewTab ? window.open(url, "_blank") : window.location.href = url;

위의 답변은 정답입니다.하지만 이건 내게 효과가 있었어

target={"_blank"}

언급URL : https://stackoverflow.com/questions/45046030/maintaining-href-open-in-new-tab-with-an-onclick-handler-in-react