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 渲染的列表中,如果我们要用到项中的主键,做些操作

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

希望对你有所帮助!

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值