Question

我创建了以下示例应用程序，以尝试并尽可能简化作为正在处理的较大应用程序的一部分而遇到的问题。该问题与office-ui-fabric-react中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;

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;

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();
}

ClickedItemList

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

}

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

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

有想法吗？

DetailsList组件未考虑选择属性

0 个答案: