Désactiver les lignes dans une interface utilisateur Office React DetailsList

Question

J'essaie de désactiver de manière conditionnelle les événements de clic de souris sur certaines lignes d'une liste de détails OUIF. Mais je n'arrive pas à le faire fonctionner. J'ai essayé de surcharger onRenderRow et de mettre CheckboxVisibility à none mais il était toujours cliquable. Ensuite, j'ai essayé de l'entourer d'un div et de le désactiver. Cependant, div dans React ne semble pas avoir désactivé l'attribut. Alors quelqu'un peut-il m'aider ici?

<DetailsList 
    items={this.state.items} 
    columns={this.getColumns()} 
    selection={this.selection}      
    selectionMode={SelectionMode.multiple} 
    onRenderRow={this.renderRow.bind(this)}> 
</DetailsList> 

private renderRow(props: IDetailsRowProps, defaultRender: any){ 
    let state = this.state.items[props.itemIndex].workflowState; 
    if(state === "disabledState"){ 
     //props.checkboxVisibility = CheckboxVisibility.hidden; <- Not working 
     // return <div disabled={true}>{defaultRender(props)}</div> <- Not working 
     return defaultRender(props); 
    } 
    else{ 
     return defaultRender(props); 
    } 
} 

Solution:

this.selection = new Selection({ canSelectItem: this.canSelectItem.bind(this), onSelectionChanged: this.clickRow.bind(this) }); 

<DetailsList 
    items={this.state.items} 
    columns={this.getColumns()} 
    selection={this.selection}      
    selectionMode={SelectionMode.multiple} 
    onRenderRow={this.renderRow.bind(this)}> 
</DetailsList> 

private canSelectItem(item: any): boolean { 
    return item.state !== "disabledState"; 
} 

Answer 1

Je lierait une fonction à onClick puis preventDefault ou stopPropagation? Modifiez également le CSS pour supprimer l'effet cursor pour qu'il ressemble à un tag HTML normal.

Quelque chose comme:

if(state === "disabledState"){ 
 
    let onClickFunc = this.preventClick.bind(this); 
 
} else { 
 
    let onClickFunc = this.normalClick.bind(this); 
 
} 
 

 
return <div onClick={onClickFunc}>{defaultRender(props)}</div>

Answer 2

Ok je peux à nouveau répondre à ma propre question. L'objet Selection possède une fonction canSelectItem pour vérifier si l'utilisateur doit pouvoir sélectionner certains éléments. Cette fonction doit renvoyer une valeur booléenne et prend l'élément actuellement sélectionné du tableau afin que vous puissiez vérifier les valeurs facilement. J'ai édité mon code ci-dessus avec la solution.