Detail List多选无法获取最新选中/取消选中项问题

问题分析 #

当前使用onSelectionChanged只能拿到所有选中项的数组，无法直接获取最新变更的单个项；而onActiveItemChanged仅在项激活时触发，不响应取消选中操作。

解决方案 #

通过维护上一次选中项的快照，在onSelectionChanged回调中对比当前选中项与快照的差异，即可找出最新变更的项及对应状态：

1. 先在组件中声明变量存储上一次的选中项快照：

this._prevSelection = new Set();

2. 修改Selection初始化代码，在回调中实现差异对比：

this._selection = new Selection({
  onSelectionChanged: () => {
    const currentSelection = new Set(this._selection.getSelection());
    const changedItems = [];

    // 筛选出新增的选中项
    currentSelection.forEach(item => {
      if (!this._prevSelection.has(item)) {
        changedItems.push({ item, isSelected: true });
      }
    });

    // 筛选出取消选中的项
    this._prevSelection.forEach(item => {
      if (!currentSelection.has(item)) {
        changedItems.push({ item, isSelected: false });
      }
    });

    // 输出最新变更的项及状态
    console.log('最新变更项：', changedItems);

    // 更新快照为当前选中状态
    this._prevSelection = currentSelection;
  },
});

3. 若需单独判断某一项的选中状态，可直接使用Selection实例的isSelected方法：

// 传入要判断的列表项
const itemIsSelected = this._selection.isSelected(targetItem);

补充说明 #

• 该方式支持捕获所有操作场景下的变更，包括单选、多选、批量选中/取消
• 若使用Fluent UI的DetailsList组件，需确保已正确绑定selection属性：

<DetailsList
  items={yourItemList}
  selection={this._selection}
  selectionMode={SelectionMode.multiple}
  // 其他配置属性
/>

附示例地址：https://codepen.io/mohamed_isak_077/pen/dyqQmgL?editors=1112

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