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

IT技术 reactjs hyperlink coffeescript preventdefault
2021-04-14 03:27:42

我正在渲染一个带有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 菜鸟。

谢谢！

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>);
{
我觉得一开始用比较好
2021-05-24 03:27:42
e.preventDefault(); 之间有区别吗？是在函数的开始还是结束？放在哪里更有意义？
2021-05-29 03:27:42
这是不好的做法，请阅读关于箭头函数和.bind(this)反应应用程序中的 bin 上下文。例如：medium.freecodecamp.org/...
2021-06-04 03:27:42
除了这只是创建一个函数来传递参数。如果您已经在使用 react 和 ES6，则不需要作用域函数。您可以通过在构造函数中将其与 this 绑定来轻松实现这一点。
2021-06-05 03:27:42
请注意，如果您在调用 e.preventDefault() 之前触发渲染（例如通过更改状态），它将无效。所以最好把它作为事件处理程序的第一条语句。
2021-06-11 03:27:42

React 事件实际上是合成事件，而不是原生事件。正如这里所写：

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

尝试使用使用Event.stopImmediatePropagation：

upvote: (e) ->
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();
Event.stopPropagation 2021 年。
2021-06-10 03:27:42

尝试 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

}
这没什么区别。你得到了赞成票，因为人们this在他们的事件处理程序中有一个完全不同的问题。
2021-05-23 03:27:42

在这样的背景下

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

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

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

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

createReactClass 或 Autobinding 或使用 npm 包 'auto-bind'
2021-06-16 03:27:42
这是不好的做法，请阅读关于箭头函数和.bind(this)反应应用程序中的 bin 上下文。例如：medium.freecodecamp.org/...
2021-06-17 03:27:42
其它你可能感兴趣的问题
上一篇警告：您似乎在使用 Firebase JS SDK 的开发版本 下一篇安装 create-react-app 会导致 npm ERR！shasum 检查失败并且 npm ERR！在 '...mojOzGIEI2rg0m24Yb5Oq' 附近解析时 JSON 输入意外结束