Reactjs DetailsList组件未考虑选择属性

我创建了下面的示例应用程序，试图尽可能地简化一个问题，这是我正在开发的一个更大的应用程序的一部分。 该问题与office ui中DetailsList组件的selection属性有关

我在下面介绍了示例应用程序的主要组件，以尝试说明我的问题

App.tsx

import * as React from 'react';
import './App.css';

import { ClickedItemsList } from './ClickedItemsList';
import { GenerateItemButton } from './GenerateItemButton';
import { ItemSelectionStore } from './ItemSelectionStore';

class App extends React.Component {

  public itemSelectionStore: ItemSelectionStore = new ItemSelectionStore();

  public render() {
    return (
      <div>
          <GenerateItemButton store={this.itemSelectionStore} />
          <ClickedItemsList store={this.itemSelectionStore} />
        </div>
    );
  }
}

export default App;

import*as React from'React'；
导入“/App.css”；
从“./ClickedItemsList”导入{ClickedItemsList}；
从“/GenerateItemButton”导入{GenerateItemButton}；
从“/ItemSelectionStore”导入{ItemSelectionStore}；
类应用程序扩展了React.Component{
public itemSelectionStore:itemSelectionStore=new itemSelectionStore（）；
公共渲染（）{
返回(
);
}
}
导出默认应用程序；

ItemSelectionStore.tsx

import * as React from 'react';
import './App.css';

import { ClickedItemsList } from './ClickedItemsList';
import { GenerateItemButton } from './GenerateItemButton';
import { ItemSelectionStore } from './ItemSelectionStore';

class App extends React.Component {

  public itemSelectionStore: ItemSelectionStore = new ItemSelectionStore();

  public render() {
    return (
      <div>
          <GenerateItemButton store={this.itemSelectionStore} />
          <ClickedItemsList store={this.itemSelectionStore} />
        </div>
    );
  }
}

export default App;

import*as React from'React'；
导入“/App.css”；
从“./ClickedItemsList”导入{ClickedItemsList}；
从“/GenerateItemButton”导入{GenerateItemButton}；
从“/ItemSelectionStore”导入{ItemSelectionStore}；
类应用程序扩展了React.Component{
public itemSelectionStore:itemSelectionStore=new itemSelectionStore（）；
公共渲染（）{
返回(
);
}
}
导出默认应用程序；

GenerateItemButton.tsx

import * as React from 'react';

import { ItemSelectionStore } from './ItemSelectionStore';

export interface IGenerateItemButtonProps {
    store: ItemSelectionStore
}

export class GenerateItemButton extends React.Component<IGenerateItemButtonProps> {

    public render() {
        return (
            <button onClick={this.handleClick}/>
        )
    }

    private handleClick = () => 
        this.props.store.onAddItemButtonClicked();
}

import*as React from'React'；
从“/ItemSelectionStore”导入{ItemSelectionStore}；
导出接口IGenerateItemButtonProps{
存储：ItemSelectionStore
}
导出类GenerateItemButton扩展React.Component{
公共渲染（）{
返回(
)
}
私有handleClick=（）=>
this.props.store.onAddItemButtonClicked（）；
}

单击编辑列表

import { observer } from 'mobx-react';
import {CheckboxVisibility, DetailsList, IColumn, IObjectWithKey, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import * as React from 'react';
import { ItemSelectionStore } from './ItemSelectionStore';

export interface IClickedItemsListProps {
    store: ItemSelectionStore
}

@observer
export class ClickedItemsList extends React.Component<IClickedItemsListProps> {

    private columns: IColumn[] = [{ key: 'key', name: 'Extracted key', fieldName: 'key', minWidth: 150 }];

    public render() {
        const { store } = this.props;
        const selectedItems = store.selectedItems;

        // creating items to display
        const itemsToDisplay: IObjectWithKey[] = [];
        selectedItems.forEach(k => itemsToDisplay.push({'key': k}));

        // creating selection
        const selection = new Selection();
        selection.setItems(itemsToDisplay);
        selection.setAllSelected(true);

        return (
            <DetailsList
                items={itemsToDisplay}
                selectionPreservedOnEmptyClick={true}
                columns={this.columns}
                checkboxVisibility={CheckboxVisibility.always}
                selectionMode={SelectionMode.multiple}
                selection={selection}
            />
        )
    }

}

从'mobx react'导入{observer}；
从“office ui fabric react/lib/DetailsList”导入{CheckboxVisibility，DetailsList，IColumn，IObjectWithKey，Selection，SelectionMode}；
从“React”导入*作为React；
从“/ItemSelectionStore”导入{ItemSelectionStore}；
导出接口IClickedItemsListProps{
存储：ItemSelectionStore
}
@观察者
导出类ClickedItemsList扩展React.Component{
私有列：IColumn[]=[{key:'key'，name:'Extracted key'，fieldName:'key'，minWidth:150}]；
公共渲染（）{
const{store}=this.props；
const selectedItems=store.selectedItems；
//创建要显示的项目
常量项显示：IObjectWithKey[]=[]；
选择editems.forEach（k=>itemsToDisplay.push（{'key'：k}））；
//创建选择
常量选择=新选择（）；
selection.setItems（itemsToDisplay）；
selection.setAllSelected（true）；
返回(
)
}
}

当用户单击按钮时，一个随机字符串将添加到由ClickedItemsList组件动态显示的项目列表中

这些项目在每次单击时都会显示，但我在选择属性方面遇到了问题。 我希望添加到列表中的所有项目也处于选中状态，但我的示例应用程序未能做到这一点，所有项目只是以非选中状态显示

想法