使用React从表中获取行数据可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState, useRef } from 'react';
const Table = () => {
const [selectedRow, setSelectedRow] = useState({}); // 存储选中行的数据
const tableRef = useRef(null); // 表格的引用
const handleRowClick = (rowIndex) => {
const table = tableRef.current;
const row = table.rows[rowIndex];
const rowData = {};
// 遍历行的子元素,获取每一列的数据
Array.from(row.cells).forEach((cell, columnIndex) => {
const columnName = table.rows[0].cells[columnIndex].textContent;
rowData[columnName] = cell.textContent;
});
setSelectedRow(rowData);
};
return (
<div>
<table ref={tableRef}>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>john@example.com</td>
<td>
<button onClick={() => handleRowClick(0)}>Get Data</button>
</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>jane@example.com</td>
<td>
<button onClick={() => handleRowClick(1)}>Get Data</button>
</td>
</tr>
</tbody>
</table>
<div>
Selected Row Data:
<pre>{JSON.stringify(selectedRow, null, 2)}</pre>
</div>
</div>
);
};
export default Table;
在上面的示例中,我们创建了一个简单的表格,每一行都有一个"Get Data"按钮。当点击按钮时,会调用handleRowClick
函数,并传递行的索引作为参数。在handleRowClick
函数中,我们使用tableRef
引用获取表格元素,然后通过遍历行的子元素来获取每一列的数据。最后,将获取到的行数据存储在selectedRow
状态对象中,并在页面上显示出来。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云