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}
        />
    }

如何设置选中值为“2”的项目？

Answer 1

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

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

在您的情况下，您可以为每个值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;
};

如何在DetailsList控件中设置已签入的项目

2 个答案: