javascript - 指定 onClick 时不要打开 href(在 React js 中)

Question

我们的 <a>标签通过向 onClick 提供一个函数在我们的应用程序中打开一个自定义的 pdf 查看器。属性(property)。

我们想为可访问性提供一个 href，以便用户可以右键单击 -> 在新选项卡中打开、按住 control 并单击或他们喜欢的其他方式。

但是，当用户点击 <a>标签，我们不想真正打开链接，而是我们的 onClick函数应该处理事件。

目前我们有这样的东西:

render(){
  return (<a href="www.stackoverflow.com" onClick={(e)=>this.linkClick(e)} >click here</a>)
}

linkClick(e) {
   e.stopPropagation(); // does not stop the link from opening
   console.log("link clicked");
   return false; // does not stop the link from opening
}

在普通的 js 中，这可以通过 returning false 来完成在 onClick 函数上。我们还尝试添加 stopPropagation()无济于事。一些 react 用户添加 href="javascript: void(0)"虽然这确实禁用了链接，但它不符合我们的可访问性需求。

Answer 1

使用preventDefault。返回 false has been deprecated从 React 0.12 开始。

linkClick(e) {
   e.preventDefault();
   console.log("link clicked");
}