如何阻止用于聚焦输入框的Anchor链接跳转到哈希URL？

可以直接在你绑定的onClick回调里阻止浏览器的默认跳转行为，具体做法是接收点击事件参数并调用preventDefault()：

修改后的代码如下：

<Anchor
  href={`#${name}`}
  onClick={(e) => {
    e.preventDefault(); // 取消a标签的默认跳转行为
    document.getElementsByName(name)?.[0].focus();
  }}
>
  Test Link
</Anchor>

原理很简单：Anchor组件最终渲染为原生<a>标签，点击它的默认行为就是根据href属性跳转页面。在你的点击回调里调用e.preventDefault()，就能直接终止这个默认行为，只保留你需要的输入框聚焦操作。

如果遇到preventDefault()不生效的情况（比如组件内部事件处理优先级问题），可以尝试同时加上e.stopPropagation()来阻止事件冒泡，但绝大多数场景下单独使用preventDefault()就足够解决问题。

内容的提问来源于stack exchange，提问作者copenndthagen