Office UIファブリックの行を無効にする詳細リスト

Question

OUIF DetailsListの特定の行でマウスクリックイベントを条件付きで無効にしようとしています。しかし、私はそれを動作させるように見えることはできません。私はonRenderRowをオーバーライドし、CheckboxVisibilityをnoneに設定しようとしましたが、それでもクリック可能でした。それから私はそれの周りにdivをラップし、無効に設定してみました。しかし、Reactのdivは属性を無効にしていないようです。誰も私をここで助けてくれる？

<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); 
    } 
} 

ソリューション：

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

私はonClickその後、preventDefaultまたはstopPropagationに関数をバインドするのでしょうか？ CSSを編集してcursorエフェクトを削除し、通常のHTMLタグのように見せます。以下のような

何か：

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]をもう一度私は自分の質問に答えることができます。 Selectionオブジェクトには、ユーザーが特定の項目を選択できるかどうかを確認するcanSelectItem関数があります。この関数はbool値を返す必要があり、値を簡単にチェックできるように、現在選択されている項目を配列から取得します。上記の私のコードを解決しました。