javascript - How to execute onclick before navigating to a different page? - Stack Overflow

admin管理员组

文章数量:1361960

I am working in React and I have the following scenario.

  <a href={link} variant="primary" onClick={this.onClickDoSomething}>
                          here.
  </a>

Now, I want the onclick to execute before the link has been clicked. However I do not see it happening.

How to work around this issue ? Thanks.

I am working in React and I have the following scenario.

  <a href={link} variant="primary" onClick={this.onClickDoSomething}>
                          here.
  </a>

Now, I want the onclick to execute before the link has been clicked. However I do not see it happening.

How to work around this issue ? Thanks.

• javascript
• reactjs
• onclick

Share Improve this question Follow asked Apr 22, 2019 at 17:18 JavaDeveloperJavaDeveloper 5,6801919 gold badges8989 silver badges143143 bronze badges 3

• remove the link from href and first handle onclick event after that redirect page to given link – Jatin Parmar Commented Apr 22, 2019 at 17:20
• the onclick should fire, my guess it is more of an issue what the onclick is doing. – epascarello Commented Apr 22, 2019 at 17:21
• I've got pretty much identical code and everything works fine for me.... onClick is firing and AFTER the browser will automatically navigate to the link's url. – RayLoveless Commented Dec 7, 2021 at 20:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Note the onclick() will fire before the page is redirected. It appears that you may want to handle your navigation within your onclick function as opposed to having an href attribute. By doing it this way you can conditionally redirect (if need be) and/or wait for some async code to plete.

onClick = url => {
  alert('Do something');
  window.location.href = url;
}

<a href='#' onclick="onClick('https://stackoverflow.')">here.</a>

React snippet:

class App extends React.Component {
  onClickDoSomething = link => ev => {
    alert(link);
    // Do any operations here
    window.location.href = link;
  }
  render() {
    const link = 'https://stackoverflow.';
    return <div>
      <a href='#' onClick={this.onClickDoSomething(link)}>here.</a> 
    </div>;
  }
}

ReactDOM.render( <App/> , document.querySelector("#app"))

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='app'></div>

First will suggest use react router but if link is external then another way is keep href="#" and write onclickHandler function at the end onclickHandler just use window.location=[link]

you want to visit

Hope it helps

your click handler should be like this

onClickDoSomething=(link)=>{
//do something,then redirect to given link
window.location.href=link

}

and you should render link as

<a  variant="primary" onClick={()=>{this.onClickDoSomething(link)}}>
                      here.
</a>

All the given answers (i.e. using # for the href then adding window.location to your click handler) should work perfectly.

However, in case you're looking for another solution, you can also try making the link a button instead of an anchor tag, and just styling it as a button. Below I've done so using Bootstrap, but you could do so with just plain CSS as well:

handleClickExamQuestions =  function(URL){               
   window.location=URL       
 }

 <button class="btn btn-link" onClick = {()=>this.handleClick(URL)}>Click Me</button>

 

In React-Router-Dom ^6.10, and using <Link/> tag, I do function call before a redirect like this:

<Link
  className="navBtn"
  to="/"
  onClick={() => setNavOpen(false)}>  //HERE
     <h2>Home</h2>
 </Link>

OnClick gets executed, where I close my Navbar before redirecting to another page.

本文标签： javascriptHow to execute onclick before navigating to a different pageStack Overflow