【问题标题】:React onClick not firing at all反应 onClick 根本没有触发
【发布时间】:2016-03-17 00:49:48
【问题描述】:

我在一个组件中有一个带有 onClick 的锚标记,该组件正在由另一个组件呈现。它看起来像这样:

<a href="javascript:void(0);" className="btn btn-link" onClick={this.closeThing.bind(this)}>Close</a>

this.closeThing 已定义,当我使用 React Dev 工具时,我可以看到它知道 onClick。但是这里没有 onClick 有效,即使我更改为只记录乱码以进行测试的匿名函数。无论我想在单击时发生什么功能,单击“关闭”时都不会发生任何事情。

我尝试将事件作为参数传入,并在函数中首先调用 e.preventDefault

我正在使用 ES6 类语法来声明 React 组件。

还有其他人遇到过这种情况吗?真是令人难以置信。

哦,这以前也可以,但是我现在唯一更改的是我已将其从 jsx 文件更改为 js 文件,因为我正在使用 System.js 来利用 ES6 模块。但一切都很好,除了 onClick 不起作用。

编辑:问题似乎是我在页面上加载了两个不同的 React“实例”。 :T 一份来自 ES6 模块,一份来自 CDN URL。将 CDN URL 切换为 System.js 导入解决了这个问题。

【问题讨论】:

  • 试试onClick={() =&gt; this.closeThing()}
  • 它可能无法完全解决问题,但我建议切换到 &lt;div&gt;&lt;span&gt; 而不是锚点并删除 href。您始终可以使用 CSS 将其样式化为链接。
  • 我赞同@Scott 的建议。毕竟,您正在构建一个应用程序,而不是一个网页......这样想。我什至不记得我上次在 React 应用程序中使用 &lt;a href&gt; 是什么时候了。
  • 谢谢@ffxsam,这些天我似乎只在DIV中编码:)
  • 是的,这里也一样。所有 div 和按钮!

标签: javascript reactjs onclick jsx


【解决方案1】:

它是否在浏览器的控制台中显示任何异常?也可能是 UI 问题,可能是您的关闭区域元素被一些不允许点击实际元素的透明元素覆盖。

【讨论】:

  • 这不是答案,应该作为评论发布
  • @NickZuber 但它非常有用,一些绝对元素覆盖会导致问题,对我来说就是这种情况
  • @Guigui 我不是说没用,我说不是答案——我认为阿里的评论很有价值,但不适合作为答案
猜你喜欢
  • 1970-01-01
  • 2021-08-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-21
  • 2017-07-07
  • 2018-10-18
  • 1970-01-01
相关资源
最近更新 更多