0

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

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

1 回答 1

0

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

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

  1. 定义缓存选定项的状态,并将选定项存储在更改事件中:

     const [selectedItems, setSelectedItems] = useState<Array<IObjectWithKey> | undefined>(undefined)
     const [selection] = useState(new Selection({
         onSelectionChanged: () => {
             setSelectedItems(selection.getSelection());
         }
     }));
    
  2. 在任何重新渲染触发后手动设置选定的项目,记住关闭事件以避免无限循环:

     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]);
    
  3. 通过传递将选择绑定到详细列表selection={selection}

于 2021-04-23T08:29:47.003 回答