reactjs - React onClick 和 PreventDefault() 链接刷新/重定向？

Question

我正在使用 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 方面还是个菜鸟。

谢谢!

Answer 1

React 事件实际上是合成事件，而不是 native 事件。正如所写的here :

Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops.

尝试使用使用Event.stopImmediatePropagation:

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();