ReactJS onClick 事件，该事件禁用在 <a> 标签上的第二次单击

ReactJS onClick event which disable clicking second time on <a> tag

本文关键字：事件 标签 单击 第二次 onClick ReactJS      更新时间：2023-09-26

我正在寻找一种解决方案，如何防止通过<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 运行一个函数，将当前用户和其他用户之间的连接保存到数据库中，当前用户希望遵循第二个连接并将颜色从灰色更改为灰色。但是当我单击它一次时，有可能单击它两次，这样用户之间的连接就会加倍。正如我所检查的那样，没有像禁用这样的 attr for <a> 那么还有其他可能的解决方案可以使其无法第二次单击它吗？

这是 onClick 的回调函数：

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

你可以像这样简单地做到这一点：

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

尽管这取决于您的结构，但最好考虑将此值存储在某个更高级别的对象中，以免在视图更新时丢失值。我建议宁愿在用户操作中处理它，而不是在视图中处理。

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

好的伙计们。我应付了这个问题。我已经将以下变量添加到 followUser(userId，follow(，与我用来为标签着色<a>变量相同，它可以工作！

    followUser(userId, following){
    if(!following){
        UserActions.followUser(userId);
    }
}
相关文章：