Antd-Design List渲染列中Button 点击事件传递参数

背景：使用List 渲染的后台数据列表中，点击删除按钮，可以将该项对应的主键传递给函数

点击删除的时候，将该条商品记录对应的id 传递给函数，通过调用后台接口删除

可以看到的是关键代码：

onClick={(e)=>this.delByGuid(item.rowguid)}

直接在调用的函数中传入item.rowguid 就可以了，但是我一开始思考的时候并不是这样想的，我的想法是给Button 这个组件一个key 然后把item.rowguid的值给key，然后调用delByGuid的时候通过传入event ，然后在delByGuid中通过event.target.key来获取到这种方式，实际上我们这样的想法我也验证了

 <Button type="danger" key={item.rowguid} onClick={(e)=>this.delByGuid(e)} size="small">删除</Button>

在delByGuid 这个函数中我这样来写：

 delByGuid=(e)=>{console.log(e.target.key);Axios.post('/api/codeitem/delsubitem',{}).then(res =>{if(res.data.code==='0000'){message.success('删除成功')}else{message.error(res.data.msg);}})}

打印出来的e.target.key 是没有定义的

那么这里的e.target到底是什么东西，我们打印到控制台看一下：

 delByGuid=(e)=>{console.log(e.target);Axios.post('/api/codeitem/delsubitem',{}).then(res =>{if(res.data.code==='0000'){message.success('删除成功')}else{message.error(res.data.msg);}})}

输出结果：

这里的target 不是我们想象的那样，不是Button 这个组件，而是一个span 标签，我们通过检查元素看到：

target 实际上是button 这个标签中的<span><span> 标签

所以要在List 渲染的列表中，如果我们要用到项中的主键，做些操作

这个时候传递参数直接传入就可以

希望对你有所帮助！

Antd-Design List渲染列中Button 点击事件传递参数相关推荐

Android中Button点击事件
在Android中的Button控件上,有三种鼠标点击事件,分别是鼠标点击事件,长按事件,触摸事件接下来,看一下是如何进行的方法一: 在layout中创建一个xml文件,使用什么布局方式,你都可以 ...
android onclick方法吗,Android中button的onClick事件几种方法
Android中button的onClick事件几种方法发布时间:2020-09-03 02:36:31 来源:脚本之家阅读:100 作者:水桶前辈 Android中button的onClick事 ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
fragment类中的点击事件空指针异常
点击事件要写在 onActivityCreated中另外一种写法: 这种覆写onClick()方法,在这个方法写点击事件的时候是没有反应的 @Overridepublic void onClick( ...
Android按back后执行过程,安卓app测试获取接口返回数据，然后处理数据，放在一个button点击事件里面执行顺序有问题？无法获取数据？...
private JSONArray jsonArray; btn1.setOnClickListener(new View.OnClickListener() { @Override public v ...
cocos2d-x ListView滚动与Button点击事件
初学cocos2dx开发游戏,在实际开发游戏中遇到一些问题,比如滑动菜单,滑动button不截断ListView的滑动. 下面发表一下个人见解,本人初学,如各位大佬发现错误,请指正用ListView ...
Button点击事件
Button点击事件一般有四种方法: 1:匿名内部类 2: 自定义内部类 3 :通过当前Activity实现点击事件接口 4 :在xml文件中绑定匿名内部类格式 : <Buttonandroi ...
【Android 事件分发】事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
android root点击事件,在Android中使用InputManagerService进行事件传递
在Android中使用InputManagerService进行事件传递发布时间:2020-11-25 16:47:31 来源:亿速云阅读:67 作者:Leah 在Android中使用InputM ...

Antd-Design List渲染列中Button 点击事件传递参数

Antd-Design List渲染列中Button 点击事件传递参数相关推荐

最新文章

热门文章

Antd-Design List渲染列中Button 点击事件 传递参数

Antd-Design List渲染列中Button 点击事件 传递参数相关推荐

最新文章

热门文章

Antd-Design List渲染列中Button 点击事件传递参数

Antd-Design List渲染列中Button 点击事件传递参数相关推荐