Office Fabric：使用户能够重新select DetailsList 中的同一行

Question

对于 DetailsLists，"onActiveItemChanged" 不能很好地打开该项目的模式对话框，因为在同一行上的第二次单击（关闭模型对话框后）会被忽略，因为 activeItem 没有变了。 "onItemInvoke" 也不是很好，因为它只响应双击。

有没有办法清除活动项？

Answer 1

这里有两个解决方案：

A：通过迭代密钥强制重建 DetailsList

1) 将状态变量添加到保存键值的父组件

     state: ComponentState = {
         dialogKey: 0
     }

2) 将密钥添加到 DetailsList

        <DetailsList
            key={this.state.dialogKey}
            onActiveItemChanged={trainDialog => this.onOpenModel(item)}
            ...
        />

3）模型关闭时自增key：

     onCloseModal() {
         this.setState({
             dialogKey: this.state.dialogKey+1
         })
     }

这将强制重建 DetailsList，因此再次单击相同的将触发 onActiveItemChanged

B：为每列的渲染器添加一个 onClick 处理程序：

<span onClick={() => component.onOpenModel(action)}>Cell Content</span>

Office Fabric：使用户能够重新select DetailsList 中的同一行

Office Fabric: Enabling user to re-select the same row in DetailsList

ms-office

office-ui-fabric

office-fabric