antd在table中使用Dropdown怎么获取当前行的数据

最新推荐文章于 2024-08-26 19:59:23 发布

Min1024

最新推荐文章于 2024-08-26 19:59:23 发布

阅读量3.6k

点赞数 2

分类专栏： react 文章标签： js react

本文链接：https://blog.csdn.net/qq_42132814/article/details/114288121

版权

react 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

今天在项目中使用到antd的Dropdown组件，搭配table一起使用，效果如图：

希望在点击复制或者删除时能够获取到当前行的数据，通过查阅antd中table的api可知，Column有个render属性

这里的record就可以获取到当前行的数据，问题在于如何将render中的record传递给Dropdown

在查阅资料后，发现两种方法

1.将Dropdown封装成一个组建，然后将数据传递给自组件，在子组件中打印this.props.data就可以获取当该值了

<RiskDropdown data={record} />

2. 将Dropdown中的overlay写成一个箭头函数

<Dropdown overlay={()=>{
   return(
       <Menu>
           <Menu.Item key="1" onClick={() => this.copyClick(text, record)}>复制 
           </Menu.Item>
           <Menu.Item key="2" onClick={() => this.delClick(text, record)}>删除 
           </Menu.Item>
       </Menu>
     )
 }} placement="bottomLeft" arrow >
    <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
         <MessageTwoTone twoToneColor="#5676DB" style={{fontSize:'30px',position:'relative',top:'5px'}} />
    </a>
</Dropdown>

原理：箭头函数中的this始终和当前函数作用域内的this保持一致