Office Fabric: предоставление пользователю возможности повторно выбрать ту же строку в 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) Увеличивайте ключ, когда модель закрывается:

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

Это заставит пересобрать DetailsList, поэтому второй щелчок по тому же значению вызовет onActiveItemChanged

B: Добавьте обработчик onClick в рендерер для каждого столбца:

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