javascript - 如何在导航到不同页面之前执行 onclick？

Question

我正在 React 中工作，我有以下场景。

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

现在，我希望 onclick 在单击链接之前执行。但我不认为这种情况会发生。

如何解决这个问题？谢谢。

Answer 1

请注意，onclick() 将在页面重定向之前触发。看来您可能希望在 onclick 函数中处理导航，而不是使用 href 属性。通过这种方式，您可以有条件地重定向(如果需要)和/或等待某些异步代码完成。

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

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

react 片段:

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

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

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

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