背景:使用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 渲染的列表中,如果我们要用到项中的主键,做些操作
这个时候传递参数直接传入就可以
希望对你有所帮助!