我在 React 工作，我有以下场景。
<a href={link} variant="primary" onClick={this.onClickDoSomething}>
here.
</a>
现在，我希望在单击链接之前执行 onclick。但是，我没有看到它发生。
如何解决这个问题？谢谢。
如何在导航到不同页面之前执行 onclick？
IT技术
javascript
reactjs
onclick
2021-04-29 00:33:30
3个回答
请注意，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>首先建议使用react-router，但如果链接是外部的，那么另一种方法是保留 href="#" 并在最后编写 onclickHandler 函数 onclickHandler 只需使用 window.location=[link]
你想参观
希望能帮助到你
你的点击处理程序应该是这样的
onClickDoSomething=(link)=>{
//do something,then redirect to given link
window.location.href=link
}
你应该将链接呈现为
<a variant="primary" onClick={()=>{this.onClickDoSomething(link)}}>
here.
</a>