如何设置Fluent UI DetailsList仅通过复选框选中行

要实现仅通过点击复选框选中行，需调整配置并移除之前尝试的无效props，具体设置如下：

• 给DetailsList添加selectionZoneProps={{ disableClickableZone: true }}，该属性会禁用行区域的点击选中逻辑，仅保留复选框的选中触发能力。
• 确保开启对应选择模式，比如多选场景设置selectionMode={SelectionMode.multiple}。
• 移除你之前配置的disableAutoSelectOnInputElements、disableSelectionZone、isSelectedOnFocus、selectionPreservedOnEmptyClick这些无效props，避免功能冲突。

示例代码 #

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

// 列配置示例
const columns: IColumn[] = [
  { key: 'checkbox', name: '', fieldName: '', isRowHeader: true, isCheckbox: true },
  { key: 'name', name: '名称', fieldName: 'name' },
  // 其他自定义列...
];

// 数据源示例
const items = [
  { key: '1', name: '项目1' },
  { key: '2', name: '项目2' },
];

export const CustomDetailsList = () => {
  return (
    <DetailsList
      items={items}
      columns={columns}
      selectionMode={SelectionMode.multiple}
      selectionZoneProps={{ disableClickableZone: true }}
    />
  );
};

原理说明 #

disableClickableZone会关闭SelectionZone组件对行整体点击事件的监听，仅保留复选框的选中触发逻辑。此前你尝试的disableSelectionZone会完全禁用选择区域功能，导致复选框也无法触发选中，因此不能使用该属性。

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