反应 onClick 和 preventDefault() link refresh/redirect？

Question

我正在使用 React 渲染 link：

render: ->
  `<a className="upvotes" onClick={this.upvote}>upvote</a>`

然后，上面我有upvote功能：

upvote: ->
  // do stuff (ajax)

在 link 之前我在那个地方有 span 但我需要切换到 link 这就是问题所在 - 每次我点击 .upvotes 页面都会刷新，我到目前为止已经尝试过：

event.preventDefault() - 不工作。

upvote: (e) ->
  e.preventDefault()
  // do stuff (ajax)

event.stopPropagation() - 不工作。

upvote: (e) ->
  e.stopPropagation()
  // do stuff (ajax)

return false - 不工作。

upvote: (e) ->
  // do stuff (ajax)
  return false

我也在 index.html 中使用 jQuery 尝试了上述所有方法，但似乎没有任何效果。我应该在这里做什么以及我做错了什么？我已经检查了 event.type 并且它是 click 所以我想我应该能够以某种方式避免重定向？

对不起，我是 React 的菜鸟。

谢谢！

Answer 1

React事件实际上是Synthetic Events，而不是Native Events。正如它所写的那样 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();

Answer 2

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

检查 "no autobinding" 部分。您应该像这样编写处理程序：onClick = () => {}

Answer 3

试试 bind(this) 这样你的代码看起来像下面这样 --

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

或者如果你在构造函数中用 es6 反应组件编写你可以这样做

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

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

}

Answer 4

我发现并为我工作的 Gist：

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

srph 的功劳https://gist.github.com/srph/020b5c02dd489f30bfc59138b7c39b53

Answer 5

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

Answer 6

解决方案的完整版本将在 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 7

如果您使用复选框

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

stopPropagation 和 stopImmediatePropagation 将不起作用。

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

Answer 8

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

在您的情况下，它可能类似于：

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

就像纯 js 一样 preventdefault ：在 class 你应该喜欢这样创建一个处理程序方法：

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

Answer 14

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

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

你应该这样称呼它

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

你应该将 e 作为事件对象传递给哪里

反应 onClick 和 preventDefault() link refresh/redirect？

React onClick and preventDefault() link refresh/redirect?

hyperlink

coffeescript

preventdefault

reactjs