reactjs - 如何在 DetailsList 控件中设置选中项

Question

我使用 office-ui-fabric-react 库中的 DetailsList 组件：

   import {DetailsList} from 'office-ui-fabric-react/lib/DetailsList';
   render () {
      const item = [
        {value: 'one'},
        {value: 'two'}
      ]
      return (
        <DetailsList
            checkboxVisibility={CheckboxVisibility.always}
            items={items}
            selection={selection}
        />
    }

如何设置检查值为'二的项目？

Answer 1

注意到您将 a 传递selection给 DetailsList。有几种方法selection可以做到这一点，包括：

• setAllSelected(isAllSelected: boolean)
• setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean)
• setIndexSelected(index: number, isSelected: boolean, shouldAnchor: boolean)

在您的情况下，您可以给每个值 a key。然后调用setKeySelected某处（例如，componentDidMount）来告诉 DetailsList 选择特定项目。

Answer 2

我到处寻找，始终找不到答案。要基本上在页面加载时设置所选项目，请执行以下操作：

<DetailsList
    columns={columns}
    items={getItems()}
    selection={getSelectedItems()}
/>

const getItems = () => {
     const items: any[] = [];

     itemList.map((item: any, i) => {
         items.push({
             key: i.toString(),
             Name: item.Name,
             Description: item.Description
         });
     });

     return [];
};

const getSelectedItems = (): ISelection => {
    const selection: Selection = new Selection();
    const items = getItems();

    selection.setItems(items);
    selectedItemsList.map((selectedItem: 
    any, s) => { 
         selection.setKeySelected(s.toString(), true, false);
    });

    return selection;
};

Answer 3

如果您希望默认选择所有列表项，只需selection.setAllSelected(true)在内部调用。useEffect

const selection = new Selection();
useEffect(() => {
   selection.setAllSelected(true)
}, [selection]);

Answer 4

React Typescript (tsx) 示例。

import { DetailsList, ISelection, Selection } from '@fluentui/react/lib/DetailsList';

// ...

export const Component = () => {

    const getSelectionDetails = (): string => {
      const selectionCount = selection.getSelection().length;
      return selectionCount
        ? `${selectionCount} items selected: ${selection.getSelection().map( (i: any) => i.key ).join('; ')}`
        : 'No items selected';
    }
    
    const createSelection = () => {
      return new Selection({
        onSelectionChanged: () => setSelectionDetails(getSelectionDetails()),
        getKey: (item: any) => item.key
      });
    };
      
    const [selection, setSelection] = React.useState(createSelection());
    const [selectionDetails, setSelectionDetails] = React.useState('');
    
    return <>
        <DetailsList
            // ...
            selection={selection}
            selectionMode={SelectionMode.multiple}
            // ...
        />
    </>;
}