使用Semantic-ui-react等技术栈时导航onClick事件多次触发原因咨询

嘿，这个问题我一眼就看出症结所在啦！

为什么点击时会触发3次？ #

你在代码里写的onClick = {this.onNavBarItemCLick()}犯了一个很常见的小错误：你直接调用了函数，而不是把函数的引用传递给onClick事件。

当你的组件渲染时，每个<Menu.Item>都会立即执行一次this.onNavBarItemCLick()——因为括号()会让函数立刻运行。你有3个导航项，所以渲染阶段就已经触发了3次方法。而当你点击导航项时，可能因为Link组件的跳转导致组件重新渲染，又会再执行3次，所以你会觉得是点击时触发了3次。

怎么修复这个问题？ #

你只需要调整onClick的赋值方式，把函数引用传进去，而不是直接调用它：

方案1：直接传递函数引用 #

如果你的方法不需要额外参数，直接去掉括号即可：

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

这样onClick拿到的是函数本身，只有当点击事件真正发生时，才会执行这个方法，不会在渲染阶段提前触发。

方案2：需要传递额外参数时用箭头函数包裹 #

如果你想在点击时传递参数（比如当前导航的路径），可以用箭头函数来包裹你的方法调用：

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

箭头函数会在点击时才执行，进而调用你的方法，不会在渲染阶段提前运行。

额外注意：确保this指向正确 #

如果你的onNavBarItemCLick方法里用到了this，还要注意绑定this的指向，避免出现undefined的问题：

• 可以在组件构造函数里绑定：

constructor(props) {
  super(props);
  this.onNavBarItemCLick = this.onNavBarItemCLick.bind(this);
}

• 或者用箭头函数定义方法：

onNavBarItemCLick = () => {
  // 你的业务逻辑
}

内容的提问来源于stack exchange，提问作者Sam Fisher