javascript - 如何使用 Reactjs 将按钮添加到每个 ListView 项？

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
}