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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了反应onClick和preventDefault()链接刷新/重定向?相关的知识,希望对你有一定的参考价值。

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

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事件实际上是Synthetic Events,而不是Native Events。正如它写的here

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

尝试使用使用Event.stopImmediatePropagation

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();
另一答案

当我来到这个页面时,我没有发现任何提到的选项是正确的或为我工作。他们确实给了我测试的想法,我发现这对我有用。

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

render() {
  return (<a href="test.com" onClick={this.dontGoToLink} />});
}
另一答案

在这样的背景下

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

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

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

另一答案

一个适合我的简单明了的选择是:

<a href="javascript: false" onClick={this.handlerName}>Click Me</a>
另一答案

这些方法都不适合我,所以我用CSS解决了这个问题:

.upvotes:before {
   content:"";
   float: left;
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
}
另一答案

该解决方案的完整版本将在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>);
{
另一答案

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

 <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

}
另一答案

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

另一答案

我找到并为我工作的要点:

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

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

另一答案

这是因为这些处理程序不保留范围。来自反应文件:react documentation

检查“无自动绑定”部分。您应该编写处理程序,如:onClick =()=> {}

另一答案

如果您使用复选框

<input 
    type='checkbox'
    onChange={this.checkboxHandler}
/>

stopPropagation和stopImmediatePropagation将无法正常工作。

因为你必须使用onClick = {this.checkboxHandler}

另一答案

如果你使用的是React Router,我建议你查看一下有一个方便的组件LinkContainer的react-router-bootstrap库。此组件可防止默认页面重新加载,因此您无需处理该事件。

在你的情况下,它可能看起来像:

import { LinkContainer } from 'react-router-bootstrap';

<LinkContainer to={givePathHere}>
    <span className="upvotes" onClick={this.upvote}>upvote</span>
</LinkContainer>
另一答案

我过去曾经遇到过锚标记和preventDefault的麻烦,我总是忘记我做错了什么,所以这就是我想到的。

我经常遇到的问题是我尝试通过直接解构它们来访问组件的属性,就像使用其他React组件一样。这不起作用,页面将重新加载,即使使用e.preventDefault()

function (e, { href }) {
  e.preventDefault();
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

似乎解构导致错误(Cannot read property 'href' of undefined)没有显示到控制台,可能是由于页面完全重新加载。由于函数出错,preventDefault不会被调用。如果href是#,则错误显示正确,因为没有实际的重新加载。

我现在明白,我只能在自定义React组件上访问属性作为第二个处理程序参数,而不是在本机HTML标记上。当然,要访问事件中的HTML标记属性,这将是这样的:

function (e) {
  e.preventDefault();
  const { href } = e.target;
  // Do something with href
}
...
<a href="/foobar" onClick={clickHndl}>Go to Foobar</a>

我希望这可以帮助像我这样的其他人没有显示错误!

以上是关于反应onClick和preventDefault()链接刷新/重定向?的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应组件的孩子中模拟 e.preventDefault

通过onclick里面禁用HREF

React onClick with axios 发送后刷新

event.preventDefault() 与返回 false(无 jQuery)

event.preventDefault() 与返回 false(无 jQuery)

jQuery onclick仅适用于第二次点击