如何实现Fluent UI DetailList点击行或单选框均支持多选？

我希望使用Fluent UI的DetailList组件实现多选功能，代码与官方基础示例几乎一致，仅内容不同。但当前示例中仅点击左侧复选框可实现多选，点击行时只能选中一行，不够人性化。请问如何让点击行或复选框时都能触发多选？我已查阅大量资料但未找到解决方案。

要实现点击行和复选框都支持多选，核心是给DetailList添加自定义行点击事件，复用Selection类的多选逻辑，具体操作如下：

1. 初始化正确的Selection实例
   先创建Selection实例并明确设置多选模式：

   import { Selection, SelectionMode } from '@fluentui/react';
   
   const selection = new Selection({
     selectionMode: SelectionMode.multiple,
     onSelectionChanged: () => {
       // 这里编写选中状态变化后的处理逻辑，比如更新页面状态、触发业务回调等
     }
   });
   

2. 给DetailList绑定自定义行点击事件
   在DetailList组件中添加onRowClick属性，根据键盘修饰键（Ctrl/Shift）模拟复选框的多选行为：

   <DetailList
     items={yourDataItems}
     columns={yourColumnConfig}
     selection={selection}
     selectionMode={SelectionMode.multiple}
     onRowClick={(event, item) => {
       if (event.ctrlKey || event.metaKey) {
         // Ctrl/Command键点击：切换当前行的选中状态
         selection.toggleSelection(item);
       } else if (event.shiftKey) {
         // Shift键点击：选中从上次选中项到当前行的连续范围
         selection.selectRange(item);
       } else {
         // 无修饰键点击：替换选中项为当前行
         selection.setSelectedItems([item]);
       }
       // 阻止默认行点击可能触发的单选覆盖行为
       event.preventDefault();
     }}
   />
   

设置完成后，点击行和点击左侧复选框的多选逻辑完全一致：

• 单独点击行：替换为当前选中项
• Ctrl+点击行：切换当前行选中状态（多选/取消）
• Shift+点击行：选中连续范围的行

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