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

该解决方案的完整版本将在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。正如它写的here：

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

尝试使用使用Event.stopImmediatePropagation：

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

Answer 3

尝试绑定（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

}

Answer 4

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

Answer 5

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

const expectedAction =
{
  [CALL_API]: {
    endpoint: '/collections/1/items',
    method: 'POST',
    body: "[1,2,3]",
    types:
    [
      ADD_ITEMS,
      { type: ADD_ITEMS_SUCCESS },
      ADD_ITEMS_FAIL
    ]
  }
};

srph https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53的信用

Answer 6

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

检查“无自动装订”部分。您应该编写处理程序，如：onClick =（）=＆gt; {}

Answer 7

如果您使用复选框

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

stopPropagation 和 stopImmediatePropagation 将无效。

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

Answer 8

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

在你的情况下，它可能看起来像：

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

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

Answer 9

过去我遇到过锚标记和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>

我希望这可以帮助像我这样的其他人因为没有显示错误而感到困惑！

Answer 10

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

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

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

Answer 11

在这样的背景下

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

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

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

Answer 12

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

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

Answer 13

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

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

Answer 14

就像纯 js 做 preventdefault ：在课堂上你应该像这样创建一个处理程序方法：

handler(event) {
    event.preventDefault();
    console.log(event);
}

Answer 15

您应该在调用方法时传递事件对象。例如

const handleOnSubmit = (e) => {
    console.log("in submit");
    e.preventDefault();
};

你应该这样称呼它

<form onSubmit={(e) => handleOnSubmit(e)}>

您应该将 e 作为事件对象传递的位置

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

15 个答案: