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

【问题标题】：Persist selection between pagination using fluentui/React in DetailsList在 DetailsList 中使用 fluentui/React 保持分页之间的选择
【发布时间】：2021-03-10 12:46:04
【问题描述】：

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

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

【问题讨论】：

标签： reactjs fluent-ui fluentui-react detailslist

【解决方案1】：

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

基本思路是自己把选中的item存储起来，当selection发生变化或者因为数据变化导致grid重新渲染时，手动设置selection。

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

 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}将选择绑定到详细列表

【讨论】：