的preventDefault在鏈接陣營路由器不能正常工作

我從陣營路由器一個<Link>元素，我不想在新標籤或現有標籤頁中打開，但e.preventDefault()不工作：的preventDefault在鏈接陣營路由器不能正常工作

constructor(props) { 
    super(props); 
    this.loadLink = this.loadLink.bind(this); 
} 

loadLink(e) { 
    e.preventDefault(); 
    const id = null || e.target.id; 
    this.props.onLink(id); 
} 

render() { 
    return (
     <Link id="my-id" ref="my-id" onClick={this.loadLink} to="/some-url">Some link</Link> 
    ); 
}

我試過e.stopPropagation()和e.nativeEvent.stopImmediatePropagation()，試圖將它從<Link>轉換爲常規<a>標籤，但無論點擊什麼鏈接，都會在新標籤頁中打開。

我已經通過開發工具進行了檢查，並且它是連接到該鏈接的唯一自定義事件處理程序。

任何想法這可能是什麼或如何追蹤？

來源

2017-04-21 OrdinaryHuman

React使用合成事件。 http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events – chris

如果你不希望它連接到任何地方，爲什麼不使用跨度？ – azium

@chris是的，這就是爲什麼我認爲'e.stopPropgataion'或'e.nativeEvent.stopImmediatePropagation（）'可能工作，但他們不。 @azium我想要一個超鏈接的SEO優勢，跨度不會提供。 – OrdinaryHuman

-1

OK，原來別人又增加了一個功能，事件偵聽器在另一個組件，這就是爲什麼它是在新標籤打開，無論我做什麼添加到所有的HREF 。

componentDidMount() { const anchors = document.getElementsByTagName("a"); for (let i = 0, length = anchors.length; i < length; i++) { const anchor = anchors[i]; anchor.addEventListener('click', function(e) { e.preventDefault(); window.open(this.getAttribute('href'), '_blank'); }, true); } }

刪除此修復了這個問題。

一個教訓是要限制的功能組件級別範圍只，上述功能的管轄所有組件的所有HREF中，不只是一個它寫成，

它在的click事件處理程序聽開發工具督察，我只是錯誤地認爲它提到了別的東西。

來源

2017-04-21 11:04:42 OrdinaryHuman

如果你想要一個鏈接，但你不想讓它路由，你應該只使用錨標籤。

<a onClick={this.loadLink} href="javascript:;">Some link</a>

，你可以用內置有沒有額外的造型的鏈接互動。一個反應路由器Link標籤是一個錨標籤。所以你的鏈接樣式將是相同的。注意href只是一個空的javascript塊。這模擬了一個死鏈接（除了你有一個點擊監聽器）。

來源

2017-04-21 04:17:22

不幸的是，這不起作用。這樣做會導致打開一個空白選項卡。另外我想要有一個href的SEO汁。 – OrdinaryHuman

除非您指定target =「_ blank」，並且您不防止默認值，否則不應出現新選項卡。或者如果你正在以編程方式進行。如果你想要一個href然後使用一個，並防止默認。但保留錨標籤。如果您沒有使用反應路由器進行路由，則不應使用鏈接 –

的preventDefault在鏈接陣營路由器不能正常工作

回答

相關問題