在Office用戶界面中禁用行反應詳細信息列表

我想在OUIF DetailsList中的某些行上有條件地禁用鼠標單擊事件。但我似乎無法讓它工作。我試着覆蓋onRenderRow並將CheckboxVisibility設置爲none，但仍然是可點擊的。然後我嘗試在它周圍包裝一個div，並將其設置爲禁用。但是，React中的div似乎沒有禁用屬性。那麼有人可以幫我在這裏嗎？在Office用戶界面中禁用行反應詳細信息列表

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

來源

2017-08-16 LeonidasFett

我會綁定到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>

來源

2017-08-16 15:28:30

已嘗試覆蓋onClick事件。但是，這不會阻止該行被選中。刪除遊標事件DID工作，但我仍然可以使用全選複選框選擇行。我想我需要使用綁定到細節列表的Selection對象。 – LeonidasFett

好了我再一次能回答我的問題。 Selection對象具有canSelectItem函數來檢查用戶是否應該能夠選擇某些項目。這個函數應該返回一個布爾值，它從數組中取出當前選中的項目，這樣你可以很容易地檢查值。我用解決方案編輯了我的代碼。

來源

2017-08-16 15:45:53 LeonidasFett

在Office用戶界面中禁用行反應詳細信息列表

回答

相關問題