在 DetailsList 中使用 fluentui/React 在分页之间保持选择

如何解决在 DetailsList 中使用 fluentui/React 在分页之间保持选择

如何在 fluentui/React 中在 DataList 中保持分页之间的选择

  <DetailsList        
    items={items}
    compact={true}
    columns={columns}
    selectionMode={SelectionMode.multiple}
    getKey={getKey}
    setKey="none"
    layoutMode={DetailsListLayoutMode.justified}
    isHeaderVisible={true}
    onItemInvoked={onItemInvoked}                         
  />

解决方法

我已经管理了其他一些重新渲染事件之间的选择，我认为解决方案应该是兼容的。

基本思路是自己存储选中的item，当数据改变导致选区改变或网格重新渲染时，手动设置选区。

定义缓存选定项的状态，并将选定项存储在更改事件中：

 const [selectedItems,setSelectedItems] = useState<Array<IObjectWithKey> | undefined>(undefined)
 const [selection] = useState(new Selection({
     onSelectionChanged: () => {
         setSelectedItems(selection.getSelection());
     }
 }));

在任何重新渲染触发后手动设置所选项目，记得关闭事件以避免无限循环：

 useEffect(() => {
     var preSelected = getSelectedChildren(selectedItems);
     if (preSelected.length > 0) {
         selection.setChangeEvents(false);
         itemList.forEach(item => {
             selection.setKeySelected(item.key.toString(),preSelected.findIndex(s => s.key === item.key) >= 0,true);
         });
         selection.setChangeEvents(true);
     }
     reloadState(getSelectedChildren(selectedItems));
 },[itemList,selectedItems]);

通过传递selection={selection}
将选择绑定到详细列表