【发布时间】: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={() => this.closeThing()} -
它可能无法完全解决问题,但我建议切换到
<div>或<span>而不是锚点并删除 href。您始终可以使用 CSS 将其样式化为链接。 -
我赞同@Scott 的建议。毕竟,您正在构建一个应用程序,而不是一个网页......这样想。我什至不记得我上次在 React 应用程序中使用
<a href>是什么时候了。 -
谢谢@ffxsam,这些天我似乎只在DIV中编码:)
-
是的,这里也一样。所有 div 和按钮!
标签: javascript reactjs onclick jsx