Javascript 在 ReactJS 中使用 onClick href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42962603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
href with onClick in ReactJS
提问by TechTurtle
As per Reactjs.org to handle event and prevent default use below code:
根据 Reactjs.org 处理事件并防止默认使用以下代码：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
However, this also requires to add binding in constructor like:
但是，这也需要在构造函数中添加绑定，例如：
this.handleClick = this.handleClick.bind(this);
I was able to get desired behaviour by below code:
我能够通过以下代码获得所需的行为：
<span>
<a href="#" onClick={()=>doSomething(arg1,agr2)}>Click here</a>
</span>
Question:Which one is better option? It seems first one requires to use stateful component and second option can do the things irrespective of component being stateful or stateless.
问题：哪个是更好的选择？似乎第一个需要使用有状态组件，第二个选项可以做这些事情，而不管组件是有状态的还是无状态的。
采纳答案by Vincent D'amour
Both options produce almost the same result. Since ActionLink is a stateless component, handleClickwill be re-created and onClickreallocated. If you want to get the best performance, you can use a class, something like this:
这两个选项产生几乎相同的结果。由于 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>
);
}
}
In this example. the handleClickis bound only once, and only the render method will be executed. You can also bind the handleClickin the constructor if you prefer. But the differences are so small that I would suggest you use the one you prefer and you find it clearer.
在这个例子中。的handleClick结合只有一次，并且仅呈现方法将被执行。handleClick如果您愿意，也可以在构造函数中绑定。但是差异如此之小，我建议您使用您喜欢的那个，并且您会发现它更清晰。
回答by Vincent D'amour
the best way to fix this repeated function call on page load is to do
在页面加载时修复此重复函数调用的最佳方法是
<a href="#" onClick={() => {this.handleClick}}>click me</a>
回答by marcusmolchany
There is a slight performance issue with ---the second--- both snippets. Every time you render that <a>tag the function in the onClickwill be reallocated.
---第二个---两个片段存在轻微的性能问题。每次渲染该<a>标签时， 中的函数都onClick将被重新分配。
Here is a detailed post outlining all the ways to bind thisin react. (https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w)
这是一篇详细的文章，概述了this在 react 中绑定的所有方法。( https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w)
Edited. I misinterpreted the example code, it has the same issue of allocating the function on each render as the inline arrow function snippet. Refer Vincent D'amour's accepted answer.
已编辑。我误解了示例代码，它在每个渲染上分配函数的问题与内联箭头函数片段相同。参考Vincent D'amour接受的答案。
回答by Dhanushka Udayanga
I think you should bind with current object. let it try. refer the following example:
我认为你应该绑定当前对象。让它试试。请参考以下示例：
<a href="#" onClick={this.handleclick.bind(this)}>click me</a>
