Как выполнить onclick перед переходом на другую страницу?

Question

Я работаю в React, и у меня есть следующий сценарий.

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

Теперь я хочу, чтобы онклик выполнялся до того, как была нажата ссылка.Однако я не вижу, чтобы это произошло.

Как обойти эту проблему?Спасибо.

Answer 1

Сначала предложим использовать реагирующий маршрутизатор, но если ссылка внешняя, то другой способ - это сохранить href = "#" и написать в конце функцию onclickHandler. OnclickHandler просто использовать window.location = [ссылка]

, которую вы хотитепосетите

Надеюсь, это поможет

Answer 2

ваш обработчик кликов должен быть таким

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

}

и вы должны сделать ссылку как

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

Answer 3

Вы можете использовать событие mouseenter, которое срабатывает при наведении курсора на ссылку.Это означает, что он будет запущен до click события

Answer 4

Обратите внимание, что onclick() сработает до того, как страница будет перенаправлена.Похоже, что вы, возможно, захотите обрабатывать навигацию внутри функции onclick, а не иметь атрибут href.Делая это таким образом, вы можете условно перенаправить (при необходимости) и / или дождаться завершения асинхронного кода.

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

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

Фрагмент реакции:

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>