react表格如何获取每行数据
获取 React 表格每行数据的方法
在 React 中，可以通过以下几种方式获取表格中每一行的数据：
通过事件处理函数传递行数据
在渲染表格行时，将行数据作为参数传递给事件处理函数：
const handleRowClick = (rowData) => {
console.log(rowData);
};
return (
<table>
{data.map((row) => (
<tr key={row.id} onClick={() => handleRowClick(row)}>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
))}
</table>
);使用 ref 获取 DOM 元素数据
通过 ref 获取表格行的 DOM 元素，然后从中提取数据：
const rowRefs = useRef([]);
return (
<table>
{data.map((row, index) => (
<tr
key={row.id}
ref={(el) => (rowRefs.current[index] = el)}
onClick={() => console.log(rowRefs.current[index].dataset)}
data-id={row.id}
data-name={row.name}
>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
))}
</table>
);通过状态管理存储选中行
使用状态来跟踪当前选中的行：
const [selectedRow, setSelectedRow] = useState(null);
return (
<table>
{data.map((row) => (
<tr
key={row.id}
onClick={() => setSelectedRow(row)}
style={{ backgroundColor: selectedRow?.id === row.id ? '#eee' : '' }}
>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
))}
</table>
);使用第三方表格库
许多 React 表格库（如 react-table、Material-UI Table）提供了内置的行数据获取方法：
import { useTable } from 'react-table';
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, data });
return (
<table {...getTableProps()}>
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} onClick={() => console.log(row.original)}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
);
})}
</tbody>
</table>
);通过表单元素获取
如果表格包含可编辑的表单元素，可以通过表单提交获取所有行数据：
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const rowsData = data.map((row) => ({
...row,
value: formData.get(`row-${row.id}`)
}));
console.log(rowsData);
};
return (
<form onSubmit={handleSubmit}>
<table>
{data.map((row) => (
<tr key={row.id}>
<td>
<input
name={`row-${row.id}`}
defaultValue={row.value}
/>
</td>
</tr>
))}
</table>
<button type="submit">提交</button>
</form>
);选择哪种方法取决于具体需求，简单交互可以直接传递行数据，复杂场景可能需要结合状态管理或使用专门的表格库。
