如何获取Fluent UI DetailsList组件中的选中项

别自己手动维护选中项数组了，Fluent UI的DetailsList本身就提供了内置的Selection对象来管理所有选中逻辑，包括你遇到的全选、单选、取消选中这些场景，完全能替代手动维护状态的方式。

核心解决方案：使用官方Selection实例 #

1. 导入Selection和SelectionMode（控制单选/多选规则）
2. 初始化Selection实例，它会自动处理所有选中交互逻辑
3. 将实例传给DetailsList的selection属性
4. 通过selection.getSelection()随时获取当前所有选中项

完整代码示例 #

import { DetailsList, Selection, SelectionMode, IColumn } from '@fluentui/react';
import { useState } from 'react';

// 定义列表项类型
interface ListItem {
  key: string;
  name: string;
  age: number;
}

export default function MyDetailsList() {
  // 模拟列表数据
  const [items] = useState<ListItem[]>([
    { key: '1', name: '张三', age: 25 },
    { key: '2', name: '李四', age: 30 },
    { key: '3', name: '王五', age: 28 },
  ]);

  // 模拟列配置
  const columns: IColumn[] = [
    { key: 'name', name: '姓名', fieldName: 'name', minWidth: 100 },
    { key: 'age', name: '年龄', fieldName: 'age', minWidth: 80 },
  ];

  // 初始化Selection实例
  const selection = new Selection({
    // 设置多选模式，可选Single（单选）/Multiple（多选）
    selectionMode: SelectionMode.multiple,
    // 选中状态变化时的回调，可在这里实时获取选中项
    onSelectionChanged: () => {
      const selectedItems = selection.getSelection();
      console.log('当前选中项:', selectedItems);
    },
  });

  // 手动触发获取选中项的示例（比如按钮点击）
  const handleGetSelected = () => {
    const selectedItems = selection.getSelection();
    alert(`选中了${selectedItems.length}项`);
  };

  return (
    <div>
      <button onClick={handleGetSelected}>获取选中项</button>
      <DetailsList
        items={items}
        columns={columns}
        // 传入Selection实例
        selection={selection}
        // 控制点击行非复选框区域的行为：false=点击行清空之前选中，仅选当前行；true=追加选中当前行
        selectionPreservedOnClick={false}
      />
    </div>
  );
}

解决你遇到的三个场景问题 #

• 表头全选：Selection实例会自动处理全选/取消全选逻辑，无需额外代码
• 点击项复选框取消选中：内置逻辑会自动从选中集合中移除该项，保留其他选中项
• 点击非复选框区域单选：设置selectionPreservedOnClick={false}后，点击行非复选框区域会自动清空之前选中项，仅选中当前行；若需追加选中，设为true即可

关键说明 #

官方的Selection对象已经封装了所有选中相关的交互逻辑（包括键盘操作、批量选择、全选等），完全覆盖你遇到的以及未来可能出现的场景，比手动维护数组可靠得多。只要通过selection.getSelection()就能随时拿到最新的选中项集合。

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