ReactJS中使用href和onClick的问题

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

---

第二个存在一个类似于第一个中 onClick={this.handleClick.bind(this)} 的缺陷，即在每次渲染时都会创建一个新的函数。 - Steve Buzonas

Answer 1

两种选项几乎产生相同的结果。由于ActionLink是一个无状态组件，handleClick将会被重新创建并且onClick会被重新分配。如果你想获得最佳性能，可以使用一个类似这样的类：

```javascript class ActionLink extends React.Component { handleClick = () => { // handle click logic here }

render() { return ( Click me ); } } ```

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 只被绑定一次，只有渲染方法会执行。如果你喜欢，也可以在构造函数中绑定 handleClick。但是区别非常小，我建议您使用您喜欢且更清晰的那个。

- Vincent D'amour

---

React提醒说 href="#" "需要一个有效的值才能访问。" - K.Nicholas

Answer 2

最好的解决重复函数调用问题的方法是执行以下操作：

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

- user9061132

---

看起来你忘记加上 () 来调用 handleClick。 - vivalldi

Answer 3

在我的情况下，如果我使用 href="#"，我仍然会被重定向，所以我将我的链接/按钮保留为如下格式：

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

- Anderson Bressane

Answer 4

使用这段代码会产生一个警告

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

有一个解决方法，可以按照React CLI的建议来实现。如果您无法提供有效的HTTP链接地址，请将您的<a>标签更改为按钮。使用纯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()”是我们希望按钮执行的函数。

- jerryurenaa

---

当需要执行Javascript代码而不进行页面导航时，应优先使用按钮(Button)：https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md - Justinas Jakavonis

Answer 5

这两个片段都存在轻微的性能问题。每次渲染标签时，onClick中的函数都会被重新分配。

这里有一篇详细的文章，介绍了在React中绑定this的所有方法。(https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w)

---

编辑。我误解了示例代码，它与内联箭头函数片段一样，在每次渲染时分配函数的问题。请参考Vincent D'amour的被接受的答案。

- marcusmolchany

Answer 6

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

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

- Dhanushka Udayanga