在React中从材料表中检索selectedRows,可以通过以下步骤实现:
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';
const MyTable = () => {
const [selectedRows, setSelectedRows] = useState([]);
// 其他代码...
}
const MyTable = () => {
const [selectedRows, setSelectedRows] = useState([]);
// 表格数据
const rows = [
{ id: 1, name: 'John Doe', age: 25 },
{ id: 2, name: 'Jane Smith', age: 30 },
// 其他行...
];
// 处理行选择
const handleRowSelect = (row) => {
const isSelected = selectedRows.includes(row);
setSelectedRows(isSelected ? selectedRows.filter(r => r !== row) : [...selectedRows, row]);
};
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow key={row.id} selected={selectedRows.includes(row)}>
<TableCell>{row.id}</TableCell>
<TableCell>{row.name}</TableCell>
<TableCell>{row.age}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
<TableRow key={row.id} selected={selectedRows.includes(row)} onClick={() => handleRowSelect(row)}>
selectedRows
状态变量来获取选中的行:console.log(selectedRows);
这样,你就可以在React中从材料表中检索selectedRows了。请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。如果你想了解更多关于React和Material-UI的信息,可以参考腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云