在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用户界面中禁用行反应详细信息列表

回答

相关问题