响应jsx的执行顺序：<button> of <a>
响应jsx的执行顺序：<button> of <a>
提问于 2020-10-28 00:44:22
假设我有以下代码：
<a href="URL">
<button onCLick={this.doSomething}>do something</button>
<a>如果我点击按钮，我是先去URL还是先执行doSomething？
根据我的经验，它首先会转到URL。如果我希望doSomething先执行，然后在doSomthing完成后转到URL，该怎么办？
感谢你的帮助^_^！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-28 00:47:48
处理程序将首先运行。这就是为什么可以通过在事件上调用preventDefault来阻止页面重定向的原因--如果处理程序在页面开始重定向之后运行，则不可能防止重定向：
const App = () => {
const doSomething = (e) => {
e.preventDefault();
console.log('doing something');
};
return (
<a href="https://example.com">
<button onClick={doSomething}>do something</button>
</a>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
如果您想等到doSomething完成时，听起来就像上面一样，它是对事件进行异步调用preventDefault，然后在函数完成时将其分配给window.location.href。
const App = () => {
const doSomething = (e) => {
e.preventDefault();
const { href } = e.target.parentElement
console.log('doing something');
setTimeout(() => {
window.location.href = href;
}, 2000);
};
return (
<a href="https://example.com">
<button onClick={doSomething}>do something</button>
</a>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64564899
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号