的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>标签，但无论点击什么链接，都会在新标签页中打开。

我已经通过开发工具进行了检查，并且它是连接到该链接的唯一自定义事件处理程序。

任何想法这可能是什么或如何追踪？

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

如果你不希望它连接到任何地方，为什么不使用跨度？ – azium

@chris是的，这就是为什么我认为'e.stopPropgataion'或'e.nativeEvent.stopImmediatePropagation（）'可能工作，但他们不。 @azium我想要一个超链接的SEO优势，跨度不会提供。 – OrdinaryHuman

答

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事件处理程序听开发工具督察，我只是错误地认为它提到了别的东西。

答

如果你想要一个链接，但你不想让它路由，你应该只使用锚标签。

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

，你可以用内置有没有额外的造型的链接互动。一个反应路由器Link标签是一个锚标签。所以你的链接样式将是相同的。注意href只是一个空的javascript块。这模拟了一个死链接（除了你有一个点击监听器）。

不幸的是，这不起作用。这样做会导致打开一个空白选项卡。另外我想要有一个href的SEO汁。 – OrdinaryHuman

除非您指定target =“_ blank”，并且您不防止默认值，否则不应出现新选项卡。或者如果你正在以编程方式进行。如果你想要一个href然后使用一个，并防止默认。但保留锚标签。如果您没有使用反应路由器进行路由，则不应使用链接 –

的preventDefault在链接阵营路由器不能正常工作

相关推荐