Компонент DetailsList не учитывает свойство выбора - PullRequest
Новая
       12

Компонент DetailsList не учитывает свойство выбора

1 голос
/ 07 марта 2019

Я создал следующий пример приложения, чтобы попытаться максимально упростить проблему, с которой я сталкиваюсь как часть более крупного приложения, над которым я работаю.Проблема связана со свойством selection компонента DetailsList в office-ui-fabric-реагировать.

Я включил основные компоненты примера приложения ниже, чтобы попытаться проиллюстрировать мою проблему.

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.

Элементы отображаются, как они должны при каждом нажатии, но у меня возникли проблемы со свойством выбора.Я хочу, чтобы все элементы, добавленные в список, также находились в выбранном состоянии, но мое приложение-образец не может этого сделать, и все элементы просто отображаются в невыбранном состоянии.

Мысли?

...