开发者问题收集

如何使用 Reactjs 向每个列表视图项添加按钮?

2015-05-13
685

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

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,并将当前用户添加到所有组。

我怎样才能使用户仅添加到我单击加入的特定组?

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
}
Gazler
2015-05-13