#javascript #reactjs #onclick
#javascript #reactjs #onclick
Вопрос:
Я работаю в React, и у меня следующий сценарий.
<a href={link} variant="primary" onClick={this.onClickDoSomething}>
here.
</a>
Теперь я хочу, чтобы onclick выполнялся до того, как была нажата ссылка. Однако я не вижу, чтобы это происходило.
Как обойти эту проблему? Спасибо.
Комментарии:
1. удалите ссылку из href и сначала обработайте событие onclick, после чего перенаправьте страницу на указанную ссылку
2. onclick должен сработать, я думаю, это скорее проблема с тем, что делает onclick.
3. У меня почти идентичный код, и у меня все работает нормально …. onClick запускается, и после этого браузер автоматически переходит к URL-адресу ссылки.
Ответ №1:
Обратите внимание, что 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> Комментарии:
1. Спасибо, но здесь не «появляется» интерактивность для использования?
2. вы могли бы добавить атрибут
href='#', чтобы получить стиль, если хотите3. Обновил мой ответ, также предоставил вам пример реакции
Ответ №2:
Сначала будет предложено использовать react router, но если ссылка внешняя, тогда другой способ — сохранить href=»#» и написать функцию onclickHandler в конце onclickHandler просто использовать window.местоположение=[ссылка]
вы хотите посетить
Надеюсь, это поможет
Ответ №3:
ваш обработчик кликов должен быть таким
onClickDoSomething=(link)=>{
//do something,then redirect to given link
window.location.href=link
}
и вы должны отображать ссылку как
<a variant="primary" onClick={()=>{this.onClickDoSomething(link)}}>
here.
</a>
Комментарии:
1. Работает ли по-прежнему поведение браузера cmd click или ctrl click по умолчанию при использовании этого решения?
2. да, это будет работать с cmd click и ctrl click, но поскольку ссылка href не установлена, при использовании ctrl click откроется пустое окно
3. Спасибо за ответ, если я помещу ссылку в href привязки, она будет работать нормально, и мне не нужно открывать окно вручную. Расположение. ссылка на навигацию. Он запускает JS, а затем автоматически переходит. (протестировано в Chrome, FF и safari)
4. никогда не проверял подобным образом, спасибо, что поделился информацией, но OP уже сделал это, и он говорит, что это не работает, если вы видите код в вопросе, который он дал href и click handler для привязки тега.
Ответ №4:
Все приведенные ответы (т. Е. использование # для href, а затем добавление окна.расположение к вашему обработчику кликов) должно работать идеально.
Однако, если вы ищете другое решение, вы также можете попробовать сделать ссылку кнопкой вместо тега привязки и просто оформить ее как кнопку. Ниже я сделал это с помощью Bootstrap, но вы могли бы сделать это и с помощью простого CSS:
handleClickExamQuestions = function(URL){
window.location=URL
} <button class="btn btn-link" onClick = {()=>this.handleClick(URL)}>Click Me</button>