Question

因此，我有一段代码负责浏览网站。我正在使用React渲染JSX。我在h1标记上有一个内联onClick事件侦听器，当我单击链接以导航到我的登录页面时（仅在单击h1元素时才希望触发它）时会触发该事件。因此，它随后触发事件返回首页，阻止我浏览该网站。

我已经尝试过将链接从nav元素中删除，希望它能进一步分离它。我还尝试将h1元素移至render函数的底部，以使徽标位于屏幕底部，以查看距离是否成问题。我不相信这是因为我已经使用Google DevTools对其进行了检查，并且h1元素周围的框没有重叠，甚至没有触及链接。我注意到登录页面加载后很快便重定向到主页，所以我想知道它是否与页面加载有关。单击远离徽标的其他链接时，它也不起作用。

代码如下：

<nav className="nav-bar">
  <h1 className="site-logo" onClick={window.location.href="/"}>DG</h1>
  <Link to="/signup" className="sign-in-link">
    Sign up
  </Link>
</nav>

我希望能够浏览所有导航链接，并且除非我单击“ DG”或h1元素，否则不要返回首页，而不是自动启动回到登录页面。可能是一个很容易回答的问题，但是我对React还是比较陌生的，所以任何帮助将不胜感激。

Answer 1

您在这里犯了一个错误，onClick是一个事件侦听器，因此，它期待回调，但是您在这里使用了语句，因此可以通过将回调函数传递给onClick来解决，如下所示，

onClick={() => window.location.href = "/"}

如何修复不应激活的嵌入式事件监听器？

1 个答案: