javascript - React onClick method od link with href not working - Stack Overflow

admin管理员组

文章数量:1410717

In my React app, I have links with href attribute (it is need to open links in new window after right click on link) and on link element is react onClick method.

See example here:

class SomeComponent extends React.Component { 
  handleClick(event) {
  	alert('click. but dont redirect...');
    
    return false;
    event.preventDefault();
    event.stopPropagation();
  }
  render() {
    return (
      <a href="test" onClick={this.handleClick}>Test link</a>
    );
  }
}

ReactDOM.render(<SomeComponent/>, document.getElementById('container'));

<script src=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<div id="container">
</div>

In my React app, I have links with href attribute (it is need to open links in new window after right click on link) and on link element is react onClick method.

See example here:

class SomeComponent extends React.Component { 
  handleClick(event) {
  	alert('click. but dont redirect...');
    
    return false;
    event.preventDefault();
    event.stopPropagation();
  }
  render() {
    return (
      <a href="test" onClick={this.handleClick}>Test link</a>
    );
  }
}

ReactDOM.render(<SomeComponent/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>

click on link. onClick method calls, it is ok, but browser do redirect to page, in href attribute and I don't know, how can I prevent it.

Is possible have link with href attribute and onclick method in React without redirect on to the page in href attr?

Fiddle.

• javascript
• reactjs

Share Improve this question Follow edited Apr 28, 2017 at 13:49 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Apr 28, 2017 at 13:29 tomasnikltomasnikl 10322 gold badges22 silver badges1111 bronze badges 4

• sorry, correct link: jsfiddle/69z2wepo/77298 – tomasnikl Commented Apr 28, 2017 at 13:29
• if you don't want to redirect then use this: <a href='#' onClick={this.handleClick}>Test link</a> don't give any path in href. – Mayank Shukla Commented Apr 28, 2017 at 13:35
• I need href attribute if user wants to open link in new window... – tomasnikl Commented Apr 28, 2017 at 13:53
• If you do not want to redirect, move event.preventDefault() to the top of handleClick. – hobenkr Commented Apr 28, 2017 at 13:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You are almost there !!!! You just need to move

event.preventDefault();
event.stopPropagation();

up. And it will work !!!!.

Please find below code . Paste it.

class SomeComponent extends React.Component { 
  handleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    alert('click. but dont redirect...');

    return false;

  }
  render() {
    return (
      <a href="test" onClick={this.handleClick}>Test link</a>
    );
  }
}

ReactDOM.render(<SomeComponent/>, document.getElementById('container'));

in your href try using "javascript:void(0);"

remove preventDefault(); from onClick

本文标签： javascriptReact onClick method od link with href not workingStack Overflow