Question

我有一个来自React路由器的<Link>元素，我不想要在新标签页或现有标签页中打开，但e.preventDefault()无效：< / p>

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>标记，但无论点击链接始终在新标记中打开标签

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

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

Answer 1

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

otherwise

这为您提供了内置的链接交互，而无需额外的样式。反应路由器<a onClick={this.loadLink} href="javascript:;">Some link</a>标记是锚标记。所以你的链接样式将是相同的。请注意，href只是一个空的javascript块。这模拟了一个死链接（除了你有一个点击监听器）。

Answer 2

好的，事实证明其他人已经添加了一个函数来向另一个组件中的所有hrefs 添加事件监听器，这就是为什么无论我做什么它都在新标签中打开的原因。

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事件处理程序中进行了监听，我只是错误地认为它引用了其他内容。

React Router中链接中的PreventDefault无法正常工作

2 个答案: