Office Fabric UI React - 选择问题答案

【问题标题】：Office Fabric UI React - Selection ProblemOffice Fabric UI React - 选择问题
【发布时间】：2018-10-30 14:34:01
【问题描述】：

我正在使用 Office UI Fabric React 组件，并且正在尝试进行选择。

我想要的是获取有关选择了哪一行 DetailsList 的信息。

这是我迄今为止尝试过的（请记住，我使用的是 javascript，而不是 typescript）。

        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 时，我可能会搞砸一些事情，因此非常感谢任何提示。非常感谢！

【问题讨论】：

快一年过去了，在不得不回答自己的问题后，我被否决了。最近一定很喜欢堆栈溢出。不管怎样，它太老了，我什至不记得它是关于什么的，而且我太初学者了，无法给出正确的答案。
我会给你一个赞成票。至少现在有了结论。

标签： javascript reactjs office-fabric

【解决方案1】：

通过将选择移动到状态来修复。不确定这是否是最好的方法，但只要它有效，我就不会抱怨。

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

【讨论】：

这行得通的主要原因是因为您通过再次设置状态来触发重新渲染。可能可以在状态中设置任何变量，并且会产生相同的效果。