Javascript 为什么onClick会多次开火

我正在使用

语义ui react

redux

和

react路由器dom

。在我的组件中，我有导航栏：

<Menu >     
  <Menu.Item as={Link} to="/" onClick = {this.onNavBarItemCLick()}>
    home
  </Menu.Item>

  <Menu.Item as={Link} to="profile" onClick = {this.onNavBarItemCLick()}>
    profile
  </Menu.Item>

  <Menu.Item as={Link} to="shop" onClick = {this.onNavBarItemCLick()}>
    shop
  </Menu.Item>
</Menu>

家
轮廓
商店

---

如果我单击其中一个导航项，则方法

onNavBarItemClick

将触发3次。为什么会发生这种情况？

因为您不应该在onClick道具中立即调用它。用这个

---

最终发生的情况是，每次在状态更改时调用渲染函数时，都会调用onNavBarItemCLick，因为您会立即调用该方法，而只应将pas处理程序转换为onClick属性：

as={Link} to="shop" onClick = {this.onNavBarItemCLick.bind(this)}>

---

解决方案

你需要更换

onClick = {this.onNavBarItemCLick()}

与

或者如果您更喜欢绑定表示法

onClick = {this.onNavBarItemCLick.bind(this)} // perserving class's this

否则

为什么会这样

这是因为当您单击

render（）

时会再次调用。 React在重新渲染时非常有效，所以它是应该发生的

---

实现中的问题是，您没有传递方法引用，而是传递了该方法的返回值。

onClick的

属性将函数作为值，那么这里有什么问题

<MyComponent onClick={this.handleClick()} />

但是如果
this.handleClick
使用
this
，则可能会出现另一个错误，因为它不会自动绑定到React类中。在构造函数中，有多种方法可以修复此类绑定
this
，使用数组函数进行
handleClick
或将函数传递给
onClick
like时直接绑定
this

<MyComponent onClick={this.handleClick.bind(this)} />

我希望这有助于
当您执行此.onNavBarItemClick（）

时，括号将在该点执行函数。而

此.onNavBarItemClick

将其视为变量

因此，在上面的代码段中，当您执行

onClick={this.onNavBarItemClick（）}

时，函数本身就在那里被调用，而用户不会单击它。而如果执行

onClick={this.onNavBarItemCLick}

则仅当单击该函数时才会调用该函数

您还可以执行

onClick={（）=>this.onNavBarItemClick（）}

。这样做就是创建一个匿名函数并将其传递给

onClick

---

因此，您可以执行

onClick={this.onNavBarItemClick}

或

onClick={（）=>this.onNavBarItemClick（）}

最佳实践和附加事件处理程序的各种方法可以在上找到。你可以看看有什么适合你的需要。

<MyComponent onClick={this.handleClick()} />

<MyComponent onClick={this.handleClick} />

<MyComponent onClick={this.handleClick.bind(this)} />

class MyComponent extends React.Component {
  handleClick () {
    return () => { console.log('I am triggered on click') }
  }

  render () {
    // We call this.handleClick() which returns the function
    // that'll be actually called on click.
    return <div onClick={this.handleClick()} />
  }
}