我正在渲染一个带有反应的链接：
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>
我希望这可以帮助像我这样的其他人没有显示错误！