使用来自 react-router 的 onClick 链接

Question

我确实知道这一点：How to use onClick event on Link: ReactJS?
但它是 3 年前的，有些人认为它不再起作用了。

<Link
     onClick={() => {
          openSB(!open);
     }}
     to="/login"
>
     Sign In
</Link>

代码说明：
onClick 调用一个反应钩子来更新状态（true | false），因此是“！”。

这是我尝试做的，它似乎像魔术一样工作。这样做有什么问题还是我应该以不同的方式做？我查看了 Link 的实现，它似乎没有在任何地方使用 onClick ，但这仍然有效。可能是因为它是引擎盖下的<a> 元素。不知道为什么会这样，这就是我问的原因。
我还查看了 react-router 文档，但找不到有关此主题的任何内容，因此不胜感激。

Answer 1

如果您不确定在该链接上使用 onClick 是一种可靠的方式，您可以在链接周围创建一个包装器组件并将 onClick 放在它上面。当您单击时，单击事件将冒泡直到您的包装器组件，以便您处理它。这样你的包装元素就负责处理这个。

如果您不想添加包装元素，可以将 onMouseUp 添加到 Link 组件并调用 openSB(!open);从那里开始，onClick 不会受到影响。