根据 Reactjs.org 处理事件并防止默认使用以下代码：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
但是，这也需要在构造函数中添加绑定，例如：
this.handleClick = this.handleClick.bind(this);
我能够通过以下代码获得所需的行为：
<span>
<a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>
问题：哪个是更好的选择？似乎第一个需要使用有状态的组件，第二个选项可以做这些事情，而不管组件是有状态的还是无状态的。
这两个选项产生几乎相同的结果。由于 ActionLink 是一个无状态组件，handleClick将被重新创建和onClick重新分配。如果您想获得最佳性能，可以使用一个类，如下所示：
class ActionLink extends React.Component () {
handleClick = (e) => {
e.preventDefault();
console.log('The link was clicked.');
};
render() {
return (
<a href="#" onClick={this.handleClick}>
Click me
</a>
);
}
}
在这个例子中。的handleClick结合只有一次，并且仅呈现方法将被执行。handleClick如果您愿意，也可以在构造函数中绑定。但是差异如此之小，我建议您使用您喜欢的一个，并且您会发现它更清晰。
在页面加载时修复此重复函数调用的最佳方法是
<a href="#" onClick={() => {this.handleClick}}>click me</a>
---第二个---两个片段存在轻微的性能问题。每次渲染该<a>标签时， 中的函数都onClick将被重新分配。
这是一篇详细的文章，概述了this在 react 中绑定的所有方法。（https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w）
已编辑。我误解了示例代码，它在每个渲染上分配函数的问题与内联箭头函数片段相同。参考Vincent D'amour接受的答案。
就我而言，如果我href="#"被重定向，无论如何我都会被重定向，所以我像这样留下了我的链接/按钮：
<a href="" role="button" onClick={this.myAction}>Click here</a>