有没有办法限制 Office UI Fabric React 的详细信息列表的选择组件中的可选项目数量？

Question

Selection Component of fluent UI has a property to let the user select either single or multiple items. However, I don't see a straight-forward way to limit the user to select certain maximum number of items. Is there a way get this done?

I have tried to work around it by using the onSelectionChanged event of Selection component. But solution and the behavior doesn't seem perfect.

Codepen Link: https://codepen.io/sakamati/pen/poRryqa

const { useRef } = React;
const { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn, MarqueeSelection } = window.FluentUIReact;

interface IDetailsListDocumentsExampleState {
  columns: IColumn[];
  items: IDocument[];
  selectionDetails: string;
  isModalSelection: boolean;
  isCompactMode: boolean;
  announcedMessage?: string;
}
  
 interface IDocument {
  key: number;
  value: string;
}
  
class DetailsListDocumentsExample extends React.Component<{}, IDetailsListDocumentsExampleState> {
  private _selection: Selection;
  private _allItems: IDocument[];
  private readonly _maxSelectable = 10;
  public constructor(props: {}) {
    super(props);
    let a = [];
    for(let i=0;i<50; i++){
      a.push({key:i, value:'Abc '+i});
    }
    this._allItems = a;
    
    const columns: IColumn[] = [
      {
        key: 'column1',
        name: 'Key',        
        fieldName: 'key',
        minWidth: 160,
        maxWidth: 160,
        isRowHeader: true,
        isResizable: true,
        data: 'number',
      },
      {
        key: 'column2',
        name: 'value',
        fieldName: 'value',
        minWidth: 210,
        maxWidth: 350,
        isRowHeader: true,
        isResizable: true,
        data: 'string',
      }      
    ];

    this.state = {
      items: this._allItems,
      columns: columns,
      selectionDetails: this._getSelectionDetails(),
      isModalSelection: false,
      isCompactMode: false,
      announcedMessage: undefined,
    };
    
    this._selection = new Selection({
      onSelectionChanged: () => {
        console.log("onSelectionChanged Invoked!");
        const c = this._selection.getSelectedCount();
        //alert(this._selection.getSelectedCount());
        if(c>this._maxSelectable){
          const indices = this._selection.getSelectedIndices();          
            this._selection.toggleRangeSelected(indices[this._maxSelectable],indices.length-this._maxSelectable);
          }
          console.log(c);
      },
    });
  }

  public render() {
    const { columns, isCompactMode, items, selectionDetails, isModalSelection, announcedMessage } = this.state;

    return (       
          <MarqueeSelection selection={this._selection}>
            <DetailsList
              items={items}              
              columns={columns}
              selectionMode={SelectionMode.multiple}              
              layoutMode={DetailsListLayoutMode.justified}
              isHeaderVisible={true}
              selection={this._selection}
              selectionPreservedOnEmptyClick={true}
              onItemInvoked={this._onItemInvoked}                            
            />
          </MarqueeSelection>        
    );
  }

  

  private _onItemInvoked(item: any): void {
    alert('Item invoked: ' + item.value);
  }

  private _getSelectionDetails(): string {
    /*const selectionCount = this._selection.getSelectedCount();

    switch (selectionCount) {
      case 0:
        return 'No items selected';
      case 1:
        return '1 item selected: ' + (this._selection.getSelection()[0] as IDocument).key;
      default:
        return `${selectionCount} items selected`;
    }*/
    return "Hello";
  }  
}
ReactDOM.render(<DetailsListDocumentsExample />,
document.getElementById("root"))

Answer 1

You can clear selection when you have certain number of items:

  const clearSelection = () => {
    currentSelection.setAllSelected(false);
};