在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>

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

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={handleClick}>
        Click me
      </a>
    );
  }
}

在这个例子中.所述handleClick绑定仅一次且仅render方法将被执行.handleClick如果您愿意,也可以在构造函数中绑定它.但差异是如此之小,我建议你使用你喜欢的那个,你会发现更清楚.

Answer 2

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

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