javascript - ReactJS onClick事件禁用第二次点击<a>标签

我正在寻找一种解决方案，该方法如何防止通过<a>标记再次单击并保存同一关注者。
这是我的代码：

<a className={this.followClasses(user.following)}
   onClick={this.followUser.bind(this, user.id)}
   disabled={user.following}>
  <i className="material-icons">person-pin</i>
</a>

onClick运行一项功能，该功能将当前用户和其他用户之间的连接保存到数据库，该连接当前用户要跟随第二个用户，并将颜色从灰色更改为灰色。但是，当我单击一次时，可以单击两次，这样用户之间的连接就会加倍。正如我已经检查过的那样，没有像<a>禁用这样的属性，那么是否还有其他可能的解决方法来使第二次无法单击它？

这是onClick的回调函数：

followUser(userId){
  UserActions.followUser(userId);
}

最佳答案

您可以像这样简单地进行操作：

followUser(userId) {
    if (!this.followUserClicked) {
        this.followUserClicked = true;
        UserActions.followUser(userId);
    }
}

尽管这取决于您的结构，但最好考虑将此值存储在更高级别的对象中，以免在视图更新时丢失该值。
我建议宁愿在UserActions中处理该问题，也不愿在视图中处理。



您的代码可能会遇到的问题是，在user.following更改后，可能不会重新渲染节点，将user.following值保持在组件状态，跟踪更改的时间，并在更改后执行this.setState({following: user.following})，这将触发视图更新。