2

Our <a> tag opens a custom pdf viewer in our application by providing a function to the onClick property.

We want to provide a href for accessibility, so users can rightclick -> open in new tab, control+click or what else they fancy.

However, when the user clicks the <a> tag, we don't want to actually open the link, instead our onClick function should handle the event.

currently we have somthing like this:

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
}

In plain js this can be done by returning false on the onClick function. We've also tried adding stopPropagation() to no avail. Some react users add href="javascript: void(0)" while this does disable the link, it does not meet our accessibility needs.

Community
  • 1
  • 1
Lars
  • 3,022
  • 1
  • 16
  • 28

1 Answers1

10

Use preventDefault. Returning false has been deprecated since React 0.12.

linkClick(e) {
   e.preventDefault();
   console.log("link clicked");
}
Pavlo
  • 43,301
  • 14
  • 77
  • 113
  • Welp, Another day to be surprised by my own stupidity. I guess preventDefault slipped my mind, due to an overfocus on stopPropagation. Thanks! – Lars Jan 19 '17 at 10:00