在 ReactJS 中使用 onClick 的 href

发布于03月23日

根据Reactjs.组织处理事件并防止默认使用以下代码:

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>

Question:哪个更好？似乎第一个选项需要使用有状态的组件，第二个选项可以完成这些事情，而不管组件是有状态的还是无状态的.

推荐答案

两种 Select 产生几乎相同的结果.由于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.但是差别太小了，我建议你用你喜欢的那种，你会发现它更清晰.