Question

我想将 <a> 与 href 和 onClick 一起使用，以便我的代码在重定向到 onClick 值之前完全执行传递的 href 处理程序:

示例：

const Link = ({ children, ...props }) => <a {...props}>{children}</a>;

const someTask = () => {
  for (let i = 0; i < 1000; i++) {
    console.log(i);
  }
};

export default App = () => (
  <Link href="https://stackoverflow.com" onClick={someTask}>
    Click me
  </Link>
);

目前，以上不会在重定向前记录最多 1000 的所有数字。对我来说，在重定向发生之前记录了大约 180 个数字。

我不想要一个设置 href="#" 并处理 onClick 内的重定向的解决方案。这是由于可访问性原因，我的 <a> 需要具有明确的 href 属性值。

我研究过的一些类似帖子：

How to execute onclick before navigating to a different page? 建议处理 onClick 内的所有内容并且没有 href
HTML tag <a> want to add both href and onclick working 建议让 onClick 处理程序返回 true 或 false 是否允许 href，但 React 不允许此语法 https://reactjs.org/docs/handling-events.html

只要生成的 <a> 具有诚实的 href 并完全执行其 onClick 处理程序，我对其他方法持开放态度。

反应 <Link> 以同时使用 href 和 onClick

0 个答案: