如何使用Reactjs为每个列表视图项添加一个按钮？

Question

我在每个组旁边添加了一个加入按钮，如下所示：

var publicGroupItems = publicGroups.map(group =>
            <ListItem key={group._id} global href={'/groups/' + group._id} image={group.imageUrl} title={group.name} ><button type="button" onClick={this.joinGroup(group._id)}>joinGroup</button></ListItem>)

当我点击按钮时，它会遍历每个组ID，并将当前用户添加到所有组。

如何才能将用户添加到我点击加入的特定组？

Answer 1

这里的问题是您的onClick

onClick={this.joinGroup(group._id)}

由于您已将this.joinGroup(group._id)作为函数调用，因此在按钮被点击之前，每个组将调用一次

。

您需要引用您的功能而不是调用它：

onClick={this.joinGroup.bind(this, group._id)}

单击按钮时会触发joinGroup。第一个参数是group._id的值，第二个参数是SyntheticEvent。

joinGroup: function(groupId, event) {
  //Join The Group
}