反应onClick和preventDefault（）链接刷新/重定向？

React.js

樱Davaid

2020-03-16

我正在渲染一个带有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的新秀。

谢谢！

第1715篇《反应onClick和preventDefault（）链接刷新/重定向？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答
樱古一 2020.03.16

这些方法都不适合我，所以我只用CSS解决了这个问题：

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}
古一番长小小 2020.03.16

一个对我有用的不错的简单选择是：

<a href="javascript: false" onClick={this.handlerName}>Click Me</a>
神奇西里 2020.03.16

当我进入此页面时，我发现上述任何选项都不正确或不适合我。他们的确给了我一些测试的想法，我发现这对我有用。

dontGoToLink(e) {
  e.preventDefault();
 }

render() {
  return (<a href="test.com" onClick={this.dontGoToLink} />});
}
TomEva 2020.03.16

我发现并为我工作的要点：

const DummyLink = ({onClick, children, props}) => (
    <a href="#" onClick={evt => {
        evt.preventDefault();
        onClick && onClick();
    }} {...props}>
        {children}
    </a>
);

感谢srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

满天星 2020.03.16

这是因为这些处理程序不保留范围。从反应文档：反应文档

检查“无自动绑定”部分。您应该像这样编写处理程序：onClick =（）=> {}

乐神乐前端 2020.03.16

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

Gil番长Stafan 2020.03.16

尝试bind（this），这样您的代码如下所示-

 <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

}
猿村村 2020.03.16

该解决方案的完整版本将方法封装在onClick内，传递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>);
{
村村LEY宝儿 2020.03.16

React事件实际上是合成事件，而不是本机事件。就像这里写的：

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

尝试使用Use Event.stopImmediatePropagation：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android