React Router link 中的 PreventDefault 不起作用

Question

我有一个来自 React Router 的 <Link> 元素，我不想在新选项卡或现有选项卡中打开，但 e.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> 标签，但无论点击 link 总是在新标签页中打开。

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

知道这可能是什么或如何追踪吗？

Answer 1

好的，原来有人在另一个组件中添加了一个函数来向所有 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，而不仅仅是它所写的那个。

它在开发工具检查器的点击事件处理程序中被监听，我只是错误地认为它指的是其他东西。

React Router link 中的 PreventDefault 不起作用

PreventDefault in link in React Router not working

javascript

preventdefault

reactjs

react-router