如何为Material UI Grid(Table)添加单选Checkbox逻辑并获取选中行数据

实现思路 #

• 新增状态存储当前选中的行数据：因为是单选逻辑，不需要用数组存多个选中项，直接用单个变量存储当前选中的行对象即可，选中新行时直接覆盖原有状态，天然实现自动取消其他行勾选的效果
• 绑定Checkbox的选中状态：遍历渲染每行时，判断当前行的唯一标识（这里用的是row.nodeId）是否和状态中存储的选中行标识一致，来设置Checkbox的checked属性
• 绑定勾选事件：点击Checkbox时，直接将当前行数据赋值给状态变量即可，如果需要支持点击已选中行取消选中，可额外加一层判断
• 获取选中数据：直接读取存储选中行的状态变量即可拿到完整的行数据

完整修改后代码 #

// 新增状态，存储当前选中的行数据，初始为null表示无选中
const [selectedRow, setSelectedRow] = useState(null);

return (
    <Paper sx={{ width: "100%", overflow: "hidden" }}>
      <Table style={{ width: "100%" }}>
        <CatalogRightGridHeader selected={selected} />
        <TableBody xs={12} style={{ width: "100%" }}>
          {value.map((row) => {
            return (
              <TableRow hover role="checkbox" tabIndex={-1} key={row.nodeId}>
                <TableCell style={{ width: "10px!important", padding: 2 }}>
                  {/* 修改Checkbox，绑定选中状态和点击事件 */}
                  <Checkbox
                    checked={selectedRow?.nodeId === row.nodeId}
                    onChange={() => {
                      // 点击已选中行则取消选中，否则选中当前行
                      setSelectedRow(selectedRow?.nodeId === row.nodeId ? null : row)
                    }}
                  />
                </TableCell>
                {row.rowItems
                  .sort(
                    (row1, row2) => row1.column.sequence - row2.column.sequence
                  )
                  .map((column) => {
                    return column.column.dataType === "DATE" ? (
                      <TableCell
                        key={column.id}
                        align={column.align}
                      >
                        {format(
                          new Date(parseInt(column.value)),
                          dateFormat(),
                          new Date()
                        )}
                      </TableCell>
                    ) : (
                      <TableCell
                        key={column.id}
                        align={column.align}
                      >
                        {column.value}
                      </TableCell>
                    );
                  })}
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );

补充说明 #

• 如果需要默认选中某行，直接在useState初始化时传入对应的行对象即可
• 后续要提交或者使用选中数据时，直接读取selectedRow变量就能拿到当前勾选行的完整数据，无选中时为null

内容的提问来源于stack exchange，提问作者Blank