Реакция пользовательского интерфейса Office Fabric - проблема выбора - PullRequest
Новая
       8

Реакция пользовательского интерфейса Office Fabric - проблема выбора

0 голосов
/ 30 октября 2018

Я использую компоненты Office UI Fabric React и пытаюсь сделать выбор работающим.

Я хочу получить информацию о том, какая строка из DetailsList выбрана.

Это то, что я пробовал до сих пор (имейте в виду, что я использую JavaScript, а не машинопись). 

        this._rowSelectIrf = new Selection({
            onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
        })

    _getSelectionDetails = () => {
        const selectionCount = this._rowSelectIrf.getSelectedCount();

        console.log(selectionCount + " counted")

        return `${selectionCount} items selected`;

    }

                <MarqueeSelection selection={this._rowSelectIrf}>
                    <DetailsList
                        onColumnHeaderClick={this.onColumnClick}
                        items={this.state.sortedItems}
                        setKey="items"
                        columns={this.state.columns}
                        layoutMode={DetailsListLayoutMode.fixedColumns}
                        selection={this._rowSelectIrf}
                        selectionPreservedOnEmptyClick={true}
                        ariaLabelForSelectionColumn="Toggle selection"
                        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                        onItemInvoked={this.onItemInvoked}
                        selectionMode="single"
                    />
                </MarqueeSelection>`

Выбор в любом ряду буквально ничего не делает. Возможно, я что-то напутал при конвертации из TS в JS, поэтому любые советы очень ценятся. Большое спасибо заранее!

1 Ответ

0 голосов
/ 31 октября 2018

Исправлено перемещением выделения в состояние. Не уверен, что это лучший подход, но я не буду жаловаться, пока он работает. 

selectCon: new Selection({
onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
}),
...