React onClick 和 PreventDefault() 链接刷新/重定向?

2023-12-14

我正在使用 React 渲染链接:

render: ->
  `<a className="upvotes" onClick={this.upvote}>upvote</a>`

然后,上面我有 upvote 功能:

upvote: ->
  // do stuff (ajax)

在链接之前,我在那个地方有跨度,但我需要切换到链接,这就是麻烦 - 每次我点击.upvotes页面被刷新,到目前为止我已经尝试过:

event.preventDefault() - 不起作用。

upvote: (e) ->
  e.preventDefault()
  // do stuff (ajax)

event.stopPropagation() - 不起作用。

upvote: (e) ->
  e.stopPropagation()
  // do stuff (ajax)

返回 false - 不工作。

upvote: (e) ->
  // do stuff (ajax)
  return false

我还在我的index.html 中使用jQuery 尝试了上述所有方法,但似乎没有任何效果。我应该在这里做什么以及我做错了什么?我检查了 event.type ,它是click所以我想我应该能够以某种方式避免重定向?

抱歉,我在 React 方面还是个菜鸟。

谢谢你!


React 事件实际上是合成事件,而不是本机事件。正如它所写的那样here:

事件委托:React 实际上并不将事件处理程序附加到节点本身。当 React 启动时,它开始使用单个事件监听器监听顶层的所有事件。当安装或卸载组件时,只需在内部映射中添加或删除事件处理程序。当事件发生时,React 知道如何使用此映射来调度它。当映射中没有剩余事件处理程序时,React 的事件处理程序是简单的无操作。

尝试使用使用Event.stopImmediatePropagation:

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React onClick 和 PreventDefault() 链接刷新/重定向? 的相关文章

随机推荐