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

Question

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

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

标签： reactjsfluent-uifluentui-reactdetailslist

Answer 1

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

基本思路是自己存储选中的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}