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

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

希望对你有所帮助！