在 ReactJS 中使用 onClick 的 href

Question

根据 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>

问题： 哪一个是更好的选择？似乎第一个需要使用有状态组件，第二个选项可以做这些事情，而不管组件是有状态的还是无状态的。

原文由 TechTurtle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两种选择产生几乎相同的结果。由于 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 只绑定一次，只会执行render方法。如果愿意，您还可以在构造函数中绑定 handleClick 。但差异是如此之小，我建议你使用你喜欢的那个，你会发现它更清楚。

原文由 Vincent D’amour 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在页面加载时修复此重复函数调用的最佳方法是

<a href="#" onClick={() => {this.handleClick}}>click me</a>

原文由 user9061132 发布，翻译遵循 CC BY-SA 3.0 许可协议