react antdesign 怎么把table里边点击某一项按钮把当前行内容获取到
时间: 2024-02-27 15:56:47 浏览: 32
您可以在表格的每一行中添加一个按钮,并在点击按钮时触发一个事件,该事件可以通过参数传递当前行的数据。以下是一个示例代码:
```jsx
import React, { useState } from 'react';
import { Table, Button } from 'antd';
const MyTable = () => {
const [selectedRow, setSelectedRow] = useState(null);
const handleButtonClick = (record) => {
console.log('当前行的数据:', record);
setSelectedRow(record);
};
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '操作',
key: 'action',
render: (text, record) => (
<Button onClick={() => handleButtonClick(record)}>点击</Button>
),
},
];
const data = [
{
key: '1',
name: '张三',
age: 18,
},
{
key: '2',
name: '李四',
age: 20,
},
];
return (
<div>
<Table columns={columns} dataSource={data} />
{selectedRow && (
<div>
<p>当前选中行的姓名:{selectedRow.name}</p>
<p>当前选中行的年龄:{selectedRow.age}</p>
</div>
)}
</div>
);
};
export default MyTable;
```
在上面的代码中,我们通过 `handleButtonClick` 函数来处理按钮的点击事件,并通过 `record` 参数获取当前行的数据,最终将当前行的数据保存在 `selectedRow` 状态中。在表格下方的 `div` 中,我们通过 `selectedRow` 状态来展示当前选中行的数据。