如何解决使用来自React-Router的onClick on Link
我确实知道这一点:How to use onClick event on Link: ReactJS?
但这是3年前的事,有人建议它不再工作了。
<Link
onClick={() => {
openSB(!open);
}}
to="/login"
>
Sign In
</Link>
代码说明:
onClick调用一个react钩子,该钩子会更新状态(true | false),因此会更新“!”。
这是我尝试做的事情,它看起来像魔术。这样是否有问题,还是应该以其他方式进行?我查看了Link的实现,它似乎在任何地方都没有使用onClick,但仍然可以使用。可能是因为它是幕后的<a>
元素。不知道为什么会这样,这就是我问的原因。
我还查看了react-router文档,但找不到关于该主题的任何内容,因此将不胜感激。
解决方法
如果不确定在该链接上使用onClick是可靠的方法,则可以围绕该链接创建包装器组件,然后将onClick放在其上。当您单击时,单击事件将冒泡直到包装器组件开始处理。这样,您的wrapper元素负责处理此问题。
如果不想添加包装元素,则可以将onMouseUp添加到Link组件并调用openSB(!open);。从那里开始,onClick不会被触碰。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。