React Data Grid 实现单选行功能的解决方案

前言

在React Data Grid表格组件中，默认支持多选行功能，但实际开发中经常会遇到需要限制用户只能选择单行数据的场景。本文将详细介绍如何在React Data Grid中实现单选行功能，并提供几种不同的实现方案。

核心实现方案

方案一：通过onSelectedRowsChange控制选择状态

const onSelectedRowsChange = (rows) => {
  const last = (rows.size > 0) ? [...rows].at(-1) : null;
  setSelectedRows(new Set(last));
};

在DataGrid组件中使用：

<DataGrid onSelectedRowsChange={onSelectedRowsChange} />

这个方案的核心逻辑是：当用户选择多行时，只保留最后选择的那一行。通过将rows转换为数组并取最后一个元素，确保始终只有一个行被选中。

方案二：隐藏表头全选复选框

为了实现更好的用户体验，通常需要隐藏表头的全选复选框：

const CustomSelectColumn = {
  ...SelectColumn,
  renderHeaderCell: null,
};

这样修改后，表头将不会显示全选/取消全选的复选框，避免了用户对单选功能的困惑。

增强交互体验

实现点击行选中功能

React Data Grid默认不提供行点击选中功能，可以通过以下方式实现：

const onCellClick = (event) => {
  if(event.row.id){
    setSelectedRows(new Set(event.row.id));
  }
};

在DataGrid组件中使用：

<DataGrid onCellClick={onCellClick} />

实现点击切换选中状态

如果需要点击行时切换选中状态（选中/取消选中）：

const onCellClick = (event) => {
  if(event.row.id){
    const value = (String(event.row.id) !== String([...selectedRows][0])) 
      ? event.row.id 
      : null;
    setSelectedRows(new Set(value));
  }
};

这个实现会检查当前点击的行是否已被选中，如果是则取消选中，否则选中该行。

实现原理分析

这些解决方案都基于React Data Grid的现有API：

1. onSelectedRowsChange：当选择行变化时触发的回调
2. onCellClick：当单元格被点击时触发的回调
3. SelectColumn：内置的选择列配置对象

通过组合这些API，我们可以灵活地控制行的选择行为，实现单选功能。

最佳实践建议

1. 明确视觉反馈：当实现单选功能时，确保UI能够清晰地显示当前选中的行
2. 一致性：在整个应用中保持单选和多选行为的一致性
3. 性能考虑：对于大型数据集，频繁的状态更新可能影响性能，可以考虑节流处理
4. 无障碍访问：确保单选功能可以通过键盘操作，符合无障碍标准

总结

虽然React Data Grid官方不直接提供单选行功能，但通过合理利用现有API，我们可以轻松实现这一需求。本文介绍的几种方案各有特点，开发者可以根据具体项目需求选择合适的实现方式。理解这些解决方案的核心思想，也能帮助我们在遇到类似需求时快速找到解决方法。