反应onClick和preventDefault()链接刷新/重定向？

Question

我正在渲染一个带有反应的链接:

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

该解决方案的完整版本将在onClick中包含方法upvotes,传递e并使用本机e.preventDefault();

upvotes = (e, arg1, arg2, arg3 ) => {
    e.preventDefault();
    //do something...
}

render(){
    return (<a type="simpleQuery" onClick={ e => this.upvotes(e, arg1, arg2, arg3) }>
      upvote
    </a>);
{

Answer 2

React事件实际上是Synthetic Events,而不是Native Events.正如这里写的:

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

尝试使用使用Event.stopImmediatePropagation:

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

Answer 3

尝试绑定(这)所以你的代码如下所示 -

 <a className="upvotes" onClick={this.upvote.bind(this)}>upvote</a>

或者如果您在构造函数中使用es6 react组件编写,则可以执行此操作

constructor(props){
   super(props);
   this.upvote = this.upvote.bind(this);
}

upvote(e){   // function upvote
   e.preventDefault();
   return false

}

Answer 4

在这样的背景下

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

如您所见，您必须显式调用 preventDefault()。我认为这个文档可能会有所帮助。

Answer 5

渲染: - > <a className="upvotes" onClick={(e) => {this.upvote(e); }}>upvote</a>