Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用Reactjs将按钮添加到每个列表视图项?

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

Stack Overflow用户
提问于 2015-05-13 14:26:33
回答 1查看 201关注 0票数 0

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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>)

当我单击该按钮时,它会遍历每个组ids,并将当前用户添加到所有组中。

如何才能使用户仅添加到我单击join的特定组中?

EN

回答 1

Stack Overflow用户

发布于 2015-05-13 15:01:22

这里的问题是你的onClick

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onClick={this.joinGroup(group._id)}

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

你需要引用你的函数,而不是调用它:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
onClick={this.joinGroup.bind(this, group._id)}

这将在按钮被单击时触发joinGroup。第一个参数是group._id的值,第二个参数是SyntheticEvent

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
joinGroup: function(groupId, event) {
  //Join The Group
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30217793

复制
相关文章
如何使用ReconAIzer将OpenAI添加到Burp中
ReconAIzer是一款功能强大的Burp Suite扩展,该工具基于Jython开发,可以为Burp Stuite添加OpenAI能力,并利用OpenAI来优化和增强渗透测试过程中的网络侦查任务。该工具专为漏洞猎人和渗透测试人员设计,支持以自动化的形式执行多种网络安全任务,可以帮助广大安全研究人员以简单快速的形式识别和利用漏洞。
FB客服
2023/08/08
2720
如何使用ReconAIzer将OpenAI添加到Burp中
odoo 给form表单视图内联列表添加按钮
odoo14\custom\estate\models\estate_customer.py
授客
2023/02/26
1.5K0
odoo 给form表单视图内联列表添加按钮
如何把custom form 7添加到wordpress每个页面
  我们已经知道wordpress如何添加contact form 7了,也知道[contact-form-7 id="xx" title="mytitle"]哪里需要加哪里,但是这个代码一次只能加一个页面,有没办法把代码加到所有页面呢?其实是可以的,只要让wordpress程序执行短代码就能实现。随ytkah一起来看看吧
ytkah
2019/06/24
5180
odoo 给列表视图添加按钮实现数据文件导入
odoo14\custom\estate\models\estate_customer.py
授客
2023/02/26
3.5K0
odoo 给列表视图添加按钮实现数据文件导入
如何在Ubuntu 14.04上使用memcached将NoSQL查询添加到MySQL
在许多优秀的文章中已经描述了使用memcached及其独立服务器实现与MySQL的一般概念,但是,作为独立服务器的memcached在MySQL客户端访问层之前充当中介,并且仅在内存中管理信息,而无需持久存储它。这使得它适用于缓存重复MySQL查询结果等任务。这样可以节省资源并优化繁忙站点的性能。
黑色技术
2018/09/19
1.8K0
for循环将字典添加到列表中出现覆盖前面数据的问题
我们可以看到上面的代码,我们通过for循环输入了3次不同的用户名和密码,并且添加到 user_list 的列表中,但是最终 user_list 打印了三次相同的数据
全栈程序员站长
2022/06/29
4.5K0
如何将WebRTC播放协议添加到EasyCVR?
自2020年浏览器的发展和兼容性发生了变化,WebRTC的延时性、安全性得到了提升和保护,尤其是疫情爆发后,实时视频的需求比之前增长了30倍,这更刺激了WebRTC产品的持续快速发展。因此我们也在EasyGBS、EasyDSS等平台内实现了WebRTC协议的播放。
TSINGSEE青犀视频
2021/11/23
1.4K0
如何将ReactJS与Flask API连接起来?
构建既可扩展又引人入胜的现代 Web 应用程序需要使用相关技术。ReactJS和Flask是两个流行的框架,分别用于前端和后端开发。
很酷的站长
2023/08/11
3740
如何将ReactJS与Flask API连接起来?
秒懂ReactJS | TW洞见
今日洞见 文章作者/配图来自ThoughtWorks:贾朝阳。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表。已经本网协议授权的媒体、网站,在使用时必须注明"内容来源:ThoughtWorks洞见",并指定原文链接,违者本网将依法追究责任。 这篇文章是为ReactJs小白准备的,希望他们快速抓住ReactJs的要点并能在实践中随机应变。 两句话版本 ReactJs把视图更新简化为一个r
ThoughtWorks
2018/04/17
3.5K0
如何手动将消息添加到Linux系统日志文件
日志文件是包含系统本身已记录的一组记录(或事件列表)的文件。使用日志文件,系统管理员可以跟踪在特定日期或特定时间发生的情况。管理员通常将日志文件用于故障排除。日志文件是自动生成的,并保存在公共目录-/ var / log /下。我们还可以将消息手动添加到Linux系统日志文件中。例如,设置日志服务器后,您可能要检查日志服务器是否正常运行。为此,我们可以在日志文件中手动添加一些条目以测试日志服务器。这是logger命令派上用场的地方。
用户6543014
2020/02/21
2.3K0
Python - 如何将 list 列表作为数据结构使用
使用 collections.deque ,它被设计成可以快速从两端添加或弹出元素
小菠萝测试笔记
2021/07/29
2.2K0
Python - 如何将 list 列表作为数据结构使用
如何在已有的 Web 应用中使用 ReactJS
当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如何从头开始,但却很难运用到实际工作中。
叙帝利
2018/07/31
14.5K0
如何在已有的 Web 应用中使用 ReactJS
如何在现有的 Web 应用中使用 ReactJS
原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能是一个 JavaScript
叙帝利
2018/04/16
7.8K0
如何在现有的 Web 应用中使用 ReactJS
zabbix 5.0如何将esxi6.7添加到监控
今天有个需求,需要将一台esxi 6.7 server添加到我们的zabbix监控服务器上,将我做的操作踩的一点坑写出来
姚华
2022/06/29
1.8K0
zabbix 5.0如何将esxi6.7添加到监控
fastadmin如何在列表的操作中添加其他按钮
fastadmin默认的列表操作中只有编辑和删除按钮,如果我们需要添加其他按钮,需要先找到对应的js文件。我们需要在初始化表格中添加buutons属性,原来的js代码如下:
高久峰
2023/06/03
4.3K0
ReactJS实现一个简单的评论列表
仔细观察,item 里的字段都来自外界,并非该组件,所以定义成无状态的 function 最好。
JavaEdge
2021/03/18
5670
列表视图(ListView和ListActivity)
在ListView中显示网络图片  ImageView 类虽然有一个 setImageUri 方法,但不能直接接受一个由网络地址生成的uri作为参数从而显示图片,我们只好使用其 setImageBit
欢醉
2018/01/22
1.5K0
列表视图(ListView和ListActivity)
点击加载更多

相似问题

如何使用列表视图项上的按钮删除列表视图项

10

将项添加到列表视图

14

如何将项添加到列表视图

21

将可单击按钮添加到列表视图项

11

将按钮添加到TTTable视图项

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文