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>

Answer 3

第二个---两个片段都存在轻微的性能问题。每次呈现<a>标记时，onClick中的函数都将重新分配。

这是一篇详细的帖子，概述了绑定this的所有方法。（https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w）

编辑。我误解了示例代码，它具有在每个渲染上分配函数作为内联箭头函数代码段的相同问题。请参阅Vincent D'amour已接受的答案。

Answer 4

我认为您应该绑定当前对象。让它尝试。请参考以下示例：

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

Answer 5

使用此代码将产生警告

<a href="#" onClick={() => action()}>Link</a>

有一个解决方法，可以按照react cli建议进行操作，这是如果您不能使用HTTP：etc提供有效的链接地址来将标签更改为按钮。可以使按钮看起来像纯CSS的链接。这是示例。

第一步创建按钮样式

const buttonToLink = {
        fontSize: '1em',
        textAlign: 'left',
        color: 'blue',
        background: 'none',
        margin: 0,
        padding: 0,
        border: 'none',
        cursor: 'pointer'
     
    }

第2步将样式添加到按钮

<button style={buttonToLink} onClick={() => action()}> This link has no warning</button>

请注意，“ action（）”是我们希望按钮遵循的功能。

Answer 6

就我而言，如果我有href="#"，无论如何我都会被重定向，所以我就这样留下了链接/按钮：

<a href="" role="button" onClick={this.myAction}>Click here</a>

在ReactJS中使用onClick进行href

6 个答案: