Question

I'm looking a solution how to prevent to clicking and saving second time the same follower through <a> tag.
This is my code:

<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 runs a function which save to DB a connection between current user and other user that the current user wants to follow second one and change a color from grey to grey. But when I clicked it once there is a possibility to click it twice and this way connection between a users is doubled. As I've checked there is no such attr like disable for <a> so is there any other possible solution to make unable to click it second time?

This is callback function for onClick:

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

Answer 1

你可以这样做：

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

虽然它取决于您的结构，但最好考虑将此值存储在某个更高级别的对象中，以便在视图更新时不会丢失值。我建议在UserActions中处理而不是在视图中处理它。

您的代码可能遇到的问题是，user.following更改后您的节点可能无法重新呈现，请保持user.following值处于组件状态，跟踪更改时的行为{{1更改后，将触发视图更新。

Answer 2

好的伙计们。我已经解决了这个问题。我已经将以下变量添加到followUser（userId，follow）中，就像我用来着色<a>标签一样，它有效！

    followUser(userId, following){
    if(!following){
        UserActions.followUser(userId);
    }
}

ReactJS onClick事件，禁止在<a> tag

2 个答案: