Office Fabric: Permet à l'utilisateur de sélectionner à nouveau la même ligne dans DetailsList

Question

Pour DetailsLists, "onActiveItemChanged" ne fonctionne pas correctement pour l'ouverture d'une boîte de dialogue modale pour cet élément en tant que second clic sur la même ligne (après fermeture du modèle dialolg) est ignoré car l'attribut activeItem n'a pas été modifié. "onItemInvoke" n'est pas génial non plus car il ne répond qu'à un double clic.

Y a-t-il un moyen d'effacer l'élément actif?

Answer 1

Voici deux solutions:

A: Force la reconstruction de DetailsList mon itérer la

clé

1) Ajouter variable d'état composant parent qui détient une valeur clé

 state: ComponentState = { 
     dialogKey: 0 
    } 

2) Ajouter la clé de la DetailsList

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

3) Incrémenter la touche lorsque t il modèle ferme:

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

Cela forcera une recréation du DetailsList donc un second clic sur le même pour déclenchera onActiveItemChanged

B: Ajouter un gestionnaire onClick au renderer pour chaque colonne:

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